在CSS中，有时候会遇到一个问题，那就是我们的<div>不会扩展到其中内容的大小。这种情况通常发生在我们使用一些浮动或绝对定位元素时。
那么，为什么会发生这种情况呢？这是由于浮动和绝对定位元素从文档流中脱离出来，不再占用其位置的原因。因此，可能会出现包含着浮动和绝对定位元素的父元素高度无法被撑开，从而导致<div>不会扩展到内容的大小的问题。
下面我们来看一下如何解决这个问题。
问题解决思路
有几种方法可以解决这个问题，我们将逐一介绍。
使用clear属性
清除浮动最简单的方法就是在父元素上使用clear属性。在CSS中， clear属性用于规定元素两侧不允许浮动元素。具体做法是在<div>元素的CSS中添加如下代码：
div {
clear:both;
}
这个将会清除所有浮动元素，直到该元素的下面没有浮动元素为止。
这种方法也适用于绝对定位元素，只需要在父元素上使用相同的clear属性即可。
使用overflow属性
另一种常见的清除浮动方法是在包含浮动元素的父元素上应用overflow属性。这能够使父元素完全包含子元素的高度（包括浮动元素）。
父元素 CSS 中加入如下代码：
div {
overflow:auto;
}
注意：使用该方法时，一定要确保父元素没有设置固定高度，因为这将导致父元素无法扩展到包含浮动元素的高度。
使用伪元素
另一种解决方案是使用伪元素：after。我们可以在<div>元素的后面添加一个空元素，然后在 CSS 中使用 :after 伪元素来清除浮动。
具体代码如下所示：
.clearfix:after {
content:"";
display:table;
clear:both;
}
这种方法使用了 display:table 属性，使伪元素表现得像一个表格单元格。这样，元素就能将下面的内容顺利地包括进去。
总结
以上三种方法都能清除浮动和解决父元素不能包含浮动元素的问题。使用 clear 和 overflow 通常是比较快捷有效的方法，可以快速解决问题。而使用伪元素则更具备可读性和复用性，这有助于加快样式表的编写和修改。
最重要的是，使用这些方法能确保您的布局保持语义和结构良好，无需使用一些 hack 方法。