阅读量:0
当一个元素被设置为浮动（float），它会被“拔”出文档流，导致父元素高度不自动增加。
在网页布局中，浮动（float）是一种常见的CSS属性，用于将元素放置在其父容器的左侧或右侧，当一个div设置了浮动后，它的高度不会自动增加，这可能导致父容器不能正确扩展其高度以包含所有浮动的子元素。
浮动与高度问题
当一个元素被设置为浮动时，它会从文档流中“脱离”，这意味着它不再占据原本的空间，而是由其他非浮动的元素填充，如果一个父容器内的所有子元素都浮动，那么父容器本身将无法感知到这些子元素的高度，从而无法自动调整自己的高度。
清除浮动的方法
为了解决这一问题，可以采用以下几种方法来清除浮动：
1、额外标签法：向父容器的末尾添加一个额外的标签，并设置其clear属性为both，这样可以强制父容器扩展其高度以包含所有浮动的子元素。
<div class="parent"> <div class="child" style="float: left;">Content 1</div> <div class="child" style="float: left;">Content 2</div> <div style="clear: both;"></div> <! 清除浮动 > </div>
2、使用after伪类：对父容器使用after声明，在指定的现在内容末尾添加新的内容，通常的做法是添加一个点号（.），因为它比较小且不引人注意，然后利用这个点号来清除浮动（闭合浮动元素），并隐藏这个内容。
#outer:after { content: "."; height: 0; visibility: hidden; display: block; clear: both; }3、设置overflow属性：将父容器的overflow属性设置为hidden或auto，这样可以使父容器闭合浮动元素，但需要注意的是，这种方法可能会对页面表现带来影响，而且这种影响是不确定的，因此最好在多个浏览器上进行测试。
.parent { overflow: auto; }4、浮动外部元素：让父容器也浮动，这利用了浮动元素的一个特性——浮动元素会闭合浮动元素，这种方式在IE/Win和标准兼容浏览器中都有较好的效果，但缺点是父容器未必想浮动就浮动的了，毕竟浮动是一种比较特殊的行为，有时布局不允许其浮动也很正常。
FAQs
Q1:为什么设置了float后，div的高度不会自动增加？
A1: 当元素被设置为浮动时，它会从文档流中“脱离”，不再占据原本的空间，如果一个父容器内的所有子元素都浮动，那么父容器本身将无法感知到这些子元素的高度，从而无法自动调整自己的高度。
Q2:如何清除浮动？
A2: 可以通过以下方法清除浮动：向父容器的末尾添加一个额外的标签并设置其clear属性为both；对父容器使用after声明；将父容器的overflow属性设置为hidden或auto；或者让父容器也浮动。
Q3:哪种方法更好？
A3: 每种方法都有其优缺点，额外标签法简单易用，但需要额外的无语义标签；使用after伪类可以保持HTML的干净，但可能需要考虑浏览器兼容性；设置overflow属性可能对页面表现有影响；浮动外部元素则可能不符合某些布局需求，选择哪种方法取决于具体的应用场景和个人偏好。
