【HTML/CSS】浮动模型和清除浮动的方法

1 浮动

1. 浮动是让元素脱离文档流，浮动前后的非定位元素会无视浮动元素，可能沿着元素另一侧垂直流动。
2. 浮动元素会生成一个块级框，具有块级元素的特性，但是不占整行。
3. 浮动元素脱离了文档流，无法为文档流中的父元素撑起高度，造成父盒子塌陷的问题。

2 清除浮动

1. clear:left左侧不允许浮动元素
2. clear:right右侧不允许浮动元素
3. clear:both两侧不允许浮动元素

3 清除浮动的技巧

1. 添加一个空的div + clear:both清除浮动，添加了无意义的html代码
2. 给父元素添加overflow:hidden，父元素本身形成一个BFC，BFC可以包裹浮动流，BFC中浮动元素的高度也被计算在内，可以实现清除浮动，但是无法显示溢出的元素。
3. 给父元素设置伪元素清除

   .clearfix::after {
         
         
   	content: '';
   	display: block;
   	clear: both;
   	height: 0;
   	visibility: hidden;
   }
   .clearfix{
         
         
   	*zoom: 1 /*兼容IE 会触发haslayout*/ 
   	/*haslayout是IE浏览器引擎的一个组成部分，
   	在IE中，一个元素要么根据自身内容进行布局，要么根据父元素进行布局。
   	haslayout=“true”，元素会根据自身的内容去调整大小，
   	而非依赖父元素去渲染自己。
   	haslayout = “false”，该元素会依赖于父元素渲染自己。*/
   }