CSS-清除浮动

• 浮动的副作用：
  高度塌陷，影响兄弟元素的样式

什么造成了高度塌陷？

由于浮动元素的尺寸超过了包含块的尺寸

为什么会影响兄弟元素?
浮动元素脱离文档流，不占据正常流中的位置。

• 浮动特点：

1.相对于包含块
2.限制向上浮动
3.浮动元素尺寸小于包含块，高度塌陷
4.元素浮动之后，表现为行内块元素（没有设置宽度的时候，根据内容自适应）

<div>
	<div style="float:left;height:200px;width:200px;background-color: red"></div>
	<p>天气不错</p>
</div>

• 清除浮动的方式：

1.创建BFC，解决高度塌陷

• 给父元素添加overflow:hidden，截切超过包含块内容
  父级元素撑起来，浮动元素的高度算在包含块内

<div style="overflow: hidden;">
		<div style="float:left;height:200px;width:200px;background-color: red"></div>
	</div>

缺点：会裁剪浮动元素内容

• 包含块浮动

 <div style="float:left;">
		<div style="float:left;height:200px;width:200px;background-color: red"></div>
	</div>

缺点：如果要多个排版布局麻烦
2.使用clear，通过解决影响兄弟元素的方向，清除浮动

• 添加dom元素，设置clear=“both”

w3school描述，clear属性，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。
添加的元素，边界顶抵到浮动元素的边界底。如果下面正常流中的元素，因为上面添加空的dom元素，浮动元素也就不会影响下面的元素。

<div>
		<div style="float:left;height:200px;width:200px;background-color: red"></div>
		<div style="clear:both"></div>
	</div>

缺点：增加了DOM渲染

• 给包含块添加为元素选择器 :：after :：before

section::after,::before{
			clear:both;
			/**隐藏起来**/
			visibility: hidden;
			/**内容为空**/
			content:"";
			/**盒类型为block**/
			display:block;
		}

比较推荐最后一种方式清除浮动。