前端第10天--css清除浮动的6种方法

2021/3/19–前端第10天–css清除浮动的6种方法

浮动

（原来经常用，因为有副作用，现在被css3的flex布局代替）。
不同于标准流，元素按照元素的类型，元素挨着元素进行排列。
脱离了标准文档流。初衷是为了解决文字环绕的效果（内容（字）让出浮动部分，但是元素（容器什么的）没有让出）。

浮动的特征：
脱离文档流、不在占用原来位置。
可以使元素从左到右紧密排列。
具有块级元素特点，设置宽高padding、margin，但是没有换行符。
浮动后的元素不存在上下边距合并问题。
一个元素设置浮动后，同级元素几乎都要设置为浮动。
设置浮动后，原有的自适应占父元素百分百宽度变为包裹内容宽度，如下图。浮动之后，父元素会塌陷。
元素设置浮动之后，影响布局，及时清除。clear:left、both、right。

父元素因为浮动塌陷问题解决方法：

1、给父元素设置高度

/* 1-给父元素设置高度 */
            height: 200px;

2、外墙法

/* 2-让外墙清楚父元素的浮动 */
        .outer-wall {
            clear:both;
        }

3、内墙法

/* 3-让内墙清除浮动 */
        /* 真正地撑开了父元素的高度 */
        /* 换成id选择器，权重更高一点，大于.container div权重 */
        #inner-wall{
            /* width: 100%;
            clear: both;
            display: block; */
            width: 100%;
            height: 0px;
            clear: both;
            float: none;
            
        }

4、给父元素设置浮动，后面元素清除浮动

/* 4、父元素设置浮动 */
        .list1 {
            background: green;
            float: left;
        }

5、给父元素设置成行内块

.list1 {
            background: green;
            /* 5-设置父元素为行内块元素 */
            /* 达不到布局效果 如下 */
            display: inline-block;
        }

6、设置overflow：hidden/auto/sroll

.list1 {
            background: green;
            width: 800px;
            /* 6-内容溢出 */
            /* 溢出隐藏 */
            /* overflow: hidden; */
            /* 设置了之后，没有设置高度的父元素就会随着 */

            /* 溢出自适应,出现滚动条 */
            /* overflow: auto; */

            /* 溢出必出现滚动条 */
            /* overflow: scroll; */

            /* 溢出显示，不能清除浮动 */
            /* overflow: visible; */
        }

P62

---

P63