围住浮动元素的三种方法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了围住浮动元素的三种方法相关的知识,希望对你有一定的参考价值。

html代码

1 <body>
2     <section>
3         <img src="sea.png" alt="sea">
4         <p>图片标题</p>
5     </section>
6     <footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. </footer>
7 </body>

CSS代码

 1 p{
 2     margin:0;
 3 }
 4 img{
 5     float:left;
 6 }
 7 section{
 8     border:1px solid green;    
 9     margin:0 0 10px 0;
10 }
11 footer{
12     background-color: #ccc;
13 }

效果图:

下面介绍的围住浮动元素的方法,最终达成的效果都是:

方法一:为父元素添加 overflow:hidden   

1 section{
2     border:1px solid green;    
3     margin:0 0 10px 0;
4     overflow: hidden;
5 }

//overflow:hidden声明的真正用途是

//1.防止包含元素被超大内容撑大。应用overflow:hidden之后,包含元素依然保持其特定的宽度,而超大的子内容则会被容器剪切掉;

//2.它能可靠地迫使父元素包含其浮动的子元素。

方法二:同时浮动父元素

 1 section{
 2     border:1px solid green;
 3     margin:0 0 10px 0;    
 4     width:100%;
 5     float:left;
 6 }
 7 footer{
 8     background-color: #ccc;
 9     clear:left;
10 }

  缺点:margin左右auto居中失效。

方法三:添加非浮动的清除元素

  给父元素添加一个子元素,然后对该子元素应用clear样式。其中有三种方案。

  第一种:

  简单地在HTML中添加一个子元素div。

1 <body>
2     <section>
3         <img src="sea.png" alt="sea">
4         <p>图片标题</p>
5         <div class="clear"></div>
6     </section>
7     <footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</footer>
8 </body>

   在此,为div添加了一个类,以便于在CSS中写样式。

1 div.clear{
2     clear:left;
3 }

  第二种:

  如果你不想添加这个纯表现性的元素,有一个更好的方法——after伪类。

  首先为section添加一个类clearfix

1 <section class="clearfix">
2     <img src="sea.png" alt="sea">
3     <p>图片标题</p>
4 </section>
5 <footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</footer> 

  然后,再使用这个神奇的clearfix规则

1 .clearfix:after{
2     content:".";
3     display:block;
4     height:0;
5     visibility:hidden;
6     clear:both;
7 }

  //这个clearfix规则最早是由程序员Tony Aslett发明的,它只添加了一个清除的包含句点作为非浮动元素。

  第三种

  <br/>标签清除浮动

1 <body>
2      <section>
3          <img src="sea.png" alt="sea">
4          <p>图片标题</p>
5          <br clear="all"/>
6      </section>
7     <footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. </footer>
8 </body>

  缺点:不符合工作中结构、样式、行为三者分离的要求。

方法四:inline-block清除浮动

1 section{
2     display:inline-block;
3 }

  缺点:margin左右auto居中失效。

 

 

 

 

  

 

以上是关于围住浮动元素的三种方法的主要内容,如果未能解决你的问题,请参考以下文章

清理浮动的三种常用方法以及如何居中一个浮动元素

清除浮动的三种方法

清除浮动的三种方法

css:清除浮动的三种方式及其原理

ZXJL——清除浮动负面效果的三种方式

父元素div清除浮动的三种方式