让父元素围住浮动子元素的三种方法
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才被接受。
优质内容筛选与推荐>>