让父元素围住浮动子元素的三种方法

1 <section>
2     <img src="images/cuties.jpg" />
3     <p>It's fun to float</p>
4 </section>
5 <footer>Here is the footer element that runs across the bottom of the page.</footer>

 为了更好地观察各个元素的表现，给每个元素添加边框：

1 <style type="text/css">
2     img, p, section, footer {
3         border:solid 1px darkblue; }
4 </style>

页面由section元素和footer两个大元素组成，section里有一张图片和一个p元素。

下面为图片添加一个左浮动：

1 <style type="text/css">
2         img, p, section, footer {
3             border:solid 1px darkblue; }
4         img {float:left; }
5 </style>

可以看到，在为img添加了左浮动（float: left）之后，他的父元素（section）的盒子已经不把它框在里面了，section元素下面的footer元素里的文档内容也跑到了图片的右边。这显然不是我们平时在排版时想要做的效果，所以必须要调整一下，使得父元素继续包裹住浮动了的img元素，而p元素放置在img元素的右边，footer元素继续停留在section的下方。想要实现这样的效果，总共有三个方法。

 

1.为父元素添加overflow: hidden的样式

1 <style type="text/css">
2     img, p, section, footer {
3         border:solid 1px darkblue; }
4     img {
5         float:left; }
6     section {
7         overflow: hidden;}
8 </style>

相对来说，这是最简单的一种方法。实际上，overflow: hidden的样式声明的真正用途是：当为元素设定了宽度之后，就不会被它的子元素撑大，而子元素超出的部分会被切掉。除此之外，它还有另外一个作用，那就是迫使父元素包含其浮动的子元素。

 

2.同时浮动父元素

第二种促使父元素包含其浮动子元素的方法，那就是让父元素也浮动起来。

1 <style type="text/css">
2     img, p, section, footer {
3         border:solid 1px darkblue; }
4     img {
5         float:left; }
6     section {
7         float: left;}
8 </style>

这时候可以发现，父元素section包围住了浮动的子元素img，但是p元素的内容跑到了图片的下方，要解决这个问题，需要给section添加一个width: 100%的样式。而底下footer元素的内容因为section的浮动，所以跑到了它的右边。为了强制要footer待在section的下方，需要为footer添加clear: left的样式。被clear清除样式后的元素是不会提升到浮动元素旁边的。

 1 <style type="text/css">
 2     img, p, section, footer {
 3         border:solid 1px darkblue; }
 4     img {
 5         float:left; }
 6     section {
 7         float: left; width:100%; }
 8     footer {
 9         clear: left;
10     }
11 </style>

 

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

这种方式需要在父元素的最后面添加一个子元素，然后使用clear清除这个子元素的浮动。由于父元素一定会包含住没有浮动的子元素，而且被clear清除后的元素会被强制定位于浮动元素的下方，从而使得父元素将所有子函数都包含进其“盒子”内。

 1 <style type="text/css">
 2     img, p, section, footer {
 3         border:solid 1px darkblue; }
 4     img {
 5         float:left; }
 6     .clear_me {
 7         clear: left;}
 8 </style>
 9 
10 <section>
11     <img src="images/cuties.jpg" />
12     <p>It's fun to float</p>
13     <div class="clear_me"></div>
14 </section>
15 <footer>Here is the footer element that runs across the bottom of the page.</footer>

这样，也可以达到我们的目的。

因为这种方式需要在网页上添加新的内容，虽然最后处理后该内容并不可见，但手续比较复杂，我们可以使用 :after 这个伪元素来执行相应的操作。虽然这个方法与上面所介绍的操作手法大相径庭，但是思路都是一样的，所以这里把它们归为同一个方法。

 1 <style type="text/css">
 2     img, p, section, footer {
 3         border:solid 1px darkblue; }
 4     img {
 5         float:left; }
 6     .clear_fix:after{   　 /*取得section元素*/
 7     　 content:".";        /*并在它最后的内容之后添加一个点'.'*/
 8      　display: block;     /*把添加的内容显示方式定义为块级元素*/
 9     　 height: 0px;        /*将该块级元素的高度设为0px*/
10      　visibility: hidden; /*隐藏该元素*/
11     　 clear: both;        /*清除其浮动显示*/
12         }
13 </style>
14 
15 <section class="clear_fix">  　　<!--为section添加一个类名-->
16     <img src="images/cuties.jpg" />
17     <p>It's fun to float</p>
18 </section>
19 <footer>Here is the footer element that runs across the bottom of the page.</footer>

 

 

介绍完了这三种让父元素依旧包围浮动子元素的方法之后，现在来做一个总结：

1.为父元素增加样式:overfload: hidden；

2.浮动父元素，为其添加width: 100%的样式，然后为它下面的元素添加clear: left的样式。

3.在父元素的内容末尾添加一个元素，该元素应为块级元素，高度为0，并且不可见。

第1种方式不适合于下拉菜单中，因为它会把下拉菜单的外部内容都切掉。第2种方式不适用于自动外边距居中的元素，否则它会浮动。第3种方式没有很明显的缺点，只不过:after伪元素在IE家族中直到IE8才被接受。

转载于:https://www.cnblogs.com/fizx/p/6700898.html