一、在父元素底部加一行代码
<body>
<div class="content">
<h1>沉默的大多数</h1>
<p> 我现在写的东西大体属于文学的范畴，所谓文学，在我看来就是：先把文章写好看了再说，别的就不用管他妈的。除了文学，
我想不到有什么地方可以接受我这些古怪想法。赖在文学上，可以给自己在圈子中找到一个立脚点。有这样一个立脚点，就可以攻击这个圈子，攻击整个阳的世界。</p>
<p>几年前，我在美国读书。有个洋鬼子这样问我们：你们中国那个阴阳学说，怎么一切好的东西都属阳，一点不给阴剩下？当然，她这样发问，是因为她正是一个五体不全之阴人。但是这话也有些道理。话语权属于阳的一方，它当然不会说阴的一方任何好话。就是夫子也未能免俗，他把妇女和小人攻击了一通。这句话几千年来总被人引用，但我就没听到受攻击一方有任何回应。人们只是小心提防着不要做小人，
至于怎样不做妇人，这问题一直没有解决。就是到了现代，女变男的变性手术也是一个难题，而且也不宜推广——这世界上假男人太多，真男人就会找不到老婆。</p>
<div style="clear:both;"></div>
</div>
</body>
我们在父元素底部增加了一行空的div标签，并且为其设置了样式clear:both，这种方法通俗易懂，容易掌握。但缺点是添加了无意义的空标签，违背了结构表现分离，给后期维护带来了问题。
二、给父元素增加一行CSS
div.content{
float:left;
}
让父元素也一起浮动，父元素和子元素又一起排列了，所以父元素高度就可以恢复了，但是这很明显是一种将错就错的方法，父元素本来就不需要浮动，为了解决高度问题让父元素浮动又会引发其他问题。
三、利用BFC(Block Formatting Content)来给父元素增加CSS
div.content{
overflow:auto;
}
上面只是一种做法，你还可以加display:table-cell;或display:table-caption;或display:inline-block;或position:fixed;或position:absolute等等。
使用CSS中after的伪元素
给父元素的div添加一个clearfix的class类，<div class="content clearfix">，然后设置CSS
.clearfix:after{
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
这种方法其实有点类似于第一种方法，不过这种方法是通过after伪元素来给父元素末尾添加一个看不见的clear:both;的块元素，来达到清除浮动的目的。其中content: ".";是为了加一段内容，display: block;是为了让生成的元素以块级元素显示，占满剩余空间，height: 0px;是为了避免生成的内容避免原有布局的高度， visibility: hidden;是为了让生成的元素不可见。
五、更优雅的改进——尼古拉斯大师方法 (现在流行的方法！！)
.clearfix:after,
.clearfix:before{
content: " ";
display: table;
}
.clearfix:after{
clear: both;
}
上述代码把display设置为table，可以创建一个匿名的表格单元，这个匿名的表格单元可以直接触发BFC，然后再直接设置content: " ";，把内容设置为一个空格，这样就节省了不必要的代码。加上before对于清除浮动没有什么必要性，主要目的是防止浏览器顶部的空白崩溃，即是指此盒子的margin-top与上一个盒子的margin-bottom会发生折叠，（在同一个BFC中两个毗邻的块级盒子在垂直方向（和布局有关系）的margin会发生折叠）。
网友评论