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