css_19_浮动

双木桑德斯2024-07-02 9:47

- 元素浮动后的特点

1．脱离文档流。

2．不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高。

3．不会独占一行，可以与其他元素共用一行。

4．不会 margin 合并，也不会 margin 塌陷，能够完美的设置四个方向的margin和padding。

5．不会像行内块一样被当做文本处理（没有行内块的空白问题）。

- 浮动后的影响。

对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。
对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。

解决方案：

1．方案一：给父元素指定高度。

2．方案二：给父元素也设置浮动，带来其他影响。

3．方案三：给父元素设置 overflow:hidden 。

4．方案四：在所有浮动元素的最后面，添加一个块级元素 ，并给该块级元素设置 clear:both。

举例：

css 复制代码

        .outer {
            width: 500px;
            border: 1px solid black;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: rgb(10, 47, 61);
            border: 1px solid black;
            margin: 10px;
            float: left;
        }
        .box1 {
            height: 230px;
        }

css 复制代码

    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>