CSS篇之1---清除浮动

1. 方法一：添加新元素，应用 clear : both;
1. HTML：

<div class="outer">
　　<div class="div1">1</div>
　　<div class="div2">2</div>
　　<div class="div3">3</div>
　　<div class="clear"></div>
</div>

2. CSS：
1. .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;}

 

http://blog.csdn.net/zengyonglan/article/details/53304487