1. 父级div定义height * 原理：手动给父级元素定义height,就解决了父级元素无法自动获取到高度的问题， * 优点：简单 * 缺点：只适合高度固定的布局。 2. 结尾处加空的div标签 clear:both * 原理：在浮动元素后边加一个空的div，然后利用css提供的clear:both;清除浮动。会让父级div自动获取到高度， * 优点：不用确定父元素的高度 * 缺点，如果浮动元素过多的话，会出现太多的div ``` <div class="fa1" style="float: left; width: 300px;height: 300px;"> 浮动元素 </div> <!-- 2使用css3的属性 clear:both; --> <div style="clear: both;"> </div> ``` 3. 父级div定义伪类：after和zoom； 最适合的，兼容各种情况，可以复用 ``` /* 伪类:after是指在.fa选择的元素后边加元素 */ .fa:after{ /* 加入元素的内容 */ content: ""; /* 将元素设置为块元素 */ display: block; /* 将元素本身隐藏 */ visibility: hidden; /* 设置元素的高度，如果没有内容可以不设置 */ height: 0px; /* 清除浮动 */ clear: both; /* 超出部分隐藏 */ overflow: hidden; } /* 不支持伪类的元素，使用zoom缩放属性让div远离浮动的破坏 */ .fa{ zoom: 1; } ``` 4. 父元素设置overflow:hidden;可以清除浮动 * 缺点：超出盒子的部分会被隐藏 5. 双伪元素法 * 最好用。 * 在要浮动的元素的前边和后边设置 ``` .fa:before, .fa:after{ content: ""; display: block; clear: both; } .fa{ zoom: 1; } ```