CSS篇之1---清除浮动
- 方法一：添加新元素，应用 clear : both;
- HTML：
<div class="outer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="clear"></div>
</div>
- CSS：
- .clear{ clear: both; height: 0; line-height: 0; font-size: 0; }
【补充】：使用空标签清除浮动.
2. 方法二：父级div定义 overflow: auto(注意：是父级div也就是这里的 div.outer)
a.HTML：
<div class="outer over-flow"> //这里添加了一个class <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> <!--<div class="clear"></div>--> </div>
b.CSS：
.over-flow { overflow: auto; zoom: 1; //zoom: 1; 是在处理兼容性问题 }
【补充】：overflow: hidden; 也可以实现。
3. 方法三：最高大上的方法 : after 方法：（注意：作用于浮动元素的父亲）
a.HTML：
<div class="outer clearfix"> //这里添加了一个class <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </div>
b.CSS：
.clearfix:after {content: ''; display: block; clear: both; visibility: hidden; zoom: 1;}
