父元素如何围住浮动子元素

转载自：父元素如何围住浮动子元素

 

当元素使用float属性，将脱离文档流，所以父元素便不会包围它。

 1 <section>
 2       <div class="左栏">
 3         我是左栏
 4         我是左栏
 5         我是左栏
 6         我是左栏
 7       </div>
 8       <div class="右栏">
 9         我是右栏
10       </div>
11 </section>
12 <footer>我是页脚</footer>

 

CSS样式以下：

section{
  border: 1px solid #333333;
  margin:0 0 10px 0;
}
.左栏{
  width: 100px;
  border: 1px solid #333333;
}
footer{
  border: 1px solid #333333;
}

 

此时浏览器中显示:

图1.这是常规文档流，能够看到块级元素section包围左栏和右栏元素，页面自上而下堆叠在一块儿

当对左栏加入css样式：float:left；浏览器中显示变为

图2.浮动左栏后，父元素section只能包住右栏，由于左栏已经脱离了文档流,因而footer也被提了上来，紧挨着前一个块级元素section

若是想父元素仍然要包围浮动的子元素，有三种方法：

 

 

 

1. 为父元素设置overflow：hidden

深刻理解：overflow:hidden——溢出,坍塌,清除浮动

 

将section设置为：

 

1 section{
2       border: 1px solid #333333;
3       margin:0 0 100px 0;
4       overflow: hidden;
5 }

 

图3.给父元素应用了overflow：hidden后，父元素又包围了浮动的左栏

这是overflow除了常规应用的另外一个做用，它可靠的迫使父元素包含其浮动的子元素。

2. 同时浮动父元素

第二种促使父元素包围子元素的方法是让父元素也浮动起来。

1 section{
2       border: 1px solid #333333;
3       margin:0 0 10px 0;
4       float:left;
5       width: 100%;
6 }

 

浮动section后，无论子元素是否浮动，它都会牢牢包围住本身的子元素。所以，须要用width：100%再让section与浏览器同宽。
    此时因为section也脱离了文档流，footer会努力向上挤到它旁边，所以给footer应用clear：left；这样便可和第一种方法取到一样的效果。

3. 添加非浮动的清除元素

    第三种方法是给父元素最后添加一个非浮动的子元素，而后清除该子元素。因为父元素必定会包含非浮动的子元素，经过把这个子元素放在浮动元素的下方，就能够保证父元素必定会包住这个元素，同时也会包住前面的浮动元素。

 1 <section>
 2       <div class="左栏">
 3         我是左栏
 4         我是左栏
 5         我是左栏
 6         我是左栏
 7       </div>
 8       <div class="右栏">
 9         我是右栏
10       </div>
11       <div class="clear_me">        
12       </div>
13 </section>
14 <footer>我是页脚</footer>

 

给新添加的元素添加CSS样式：

.clear_me{
  clear:left;
}

 

这样，浮动的元素就被父元素包围住了，如图3所示。

若是不想添加这个纯表现性的元素，还有一个用CSS来添加这个清除元素的方法。
首先，给section添加一个类

 1 <section class="clearfix">
 2       <div class="左栏">
 3         我是左栏
 4         我是左栏
 5         我是左栏
 6         我是左栏
 7       </div>
 8       <div class="右栏">
 9         我是右栏
10       </div>
11 </section>

 

接着给这个clearfix类使用这个规则：

.clearfix:after{
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

 

这样，浮动的元素又像图1同样被父元素包住了。这个clearfix规则最先是由程序员Tony Aslett发明的，它只添加了一个内容为句点的元素(句点是最小的内容)。

总结一下
强迫父元素包含其浮动子元素的方法有三种：

1. 为父元素设置overflow：hidden；
2. 浮动父元素，而且设置宽度width：100%；其后的元素要设置clear：both；
3. 父元素内容末尾添加非浮动子元素，能够直接加一个空元素，也可使用clearfix伪类添加。