css浮动产生和清除浮动的几种方式

时间 2020-04-29

标签 css 浮动产生清除几种方式栏目 CSS 繁體版

原文原文链接

浮动的语法：float:left/right;html

浮动float的本来设计了做用初衷是为了实现文字环绕效果浏览器

浮动产生负做用：spa

　　　　一、背景不能显示设计

　　　　二、边框不能撑开父元素code

　　　　三、margin padding设置值不能正确显示htm

浮动以后会使父元素内的子元素漂浮在父元素上方，形成父元素边框重叠。因此须要清除浮动来使子元素撑开父元素。对象

简单来讲浮动是由于使用了float:left或float:right或二者都是会产生的浮动。blog

何时使用清除浮动呢？当父元素没有设置宽度或者高度的时，又须要子元素撑开父元素的时候使用清除浮动。it

演示:io

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>浮动反作用</title>
 6     <style>
 7  .container{
 8  margin:40px auto;
 9  width:400px;
10  border:5px solid grey;
11  background: yellow;　　　　/*背景不能显示*/
12         }
13  .left{float:left;width:200px;height:100px;border: 1px solid red;}
14  .right{float:right;width:196px;height:100px;border: 1px solid red;background: blue;}  /*边框不能撑开父级元素*/
15     </style>
16 </head>
17 <body>
18     <div class="container"> 
19         <div class="left">left浮动</div> 
20         <div class="right">right浮动</div>
21     </div>
22 </body>
23 </html>

结果显示：

原本俩个红色对象是在父级元素灰色盒子内的，可是由于对俩个红色盒子使用了float浮动，因此俩个盒子产生了浮动致使灰色盒子不能撑开，这样浮动就产生了。

为了解决上面的浮动产生的反作用，本人总结了如下几个清除浮动的方式：

1.clear:both清除浮动

HTML代码：

1     <div class="container"> 
2         <div class="left">left浮动</div> 
3         <div class="right">right浮动</div>
4         <div class="clear"></div>
5     </div>

具体CSS代码：

 1  <style>  2  .container{
 3  margin:40px auto;
 4  width:400px;
 5  border:5px solid grey;
 6  background: yellow;/*背景正常显示*/
 7         }
 8  .left{float:left;width:200px;height:100px;border: 1px solid red;}
 9  .right{float:right;width:196px;height:100px;border: 1px solid red;background: blue;}  /*边框能撑开*/
10  .clear{clear:both;}
11  </style>

结果显示：

父级背景以及边框也能正常显示和撑开了，优势方便使用，缺点是会多加HTML空标签

2.使用after伪元素清除浮动（推荐使用）

优势：无需额外的标签，浏览器兼容性好，是目前用的最多的一种清除浮动的方法之一，企业都在用；

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

HTML代码：

1     <div class="container"> 
2         <div class="left">left浮动</div> 
3         <div class="right">right浮动</div>
4     </div>

CSS代码：

 1  <style>  2  .container{
 3  width:400px;
 4  border:5px solid grey;
 5  background: yellow;
 6         }
 7  .left{float:left;width:200px;height:100px;border: 1px solid red;}
 8  .right{float:right;width:196px;height:100px;border: 1px solid red;background: blue;}  
 9  .container:after{
10  content:"";
11  display: block;
12  clear:both;
13         }
14  .container{ *zoom: 1;    /*ie6清除浮动的方式 *号只有IE6-IE7执行，其余浏览器不执行*/ }
15  </style>

结果显示：

3.对父级设置适合CSS高度

通常设置高度须要能肯定内容高度才能设置。这里咱们知道内容高度是100PX+上下边框为2px，这样具体父级高度为102px，

只需在上面的浮动缺点反作用代码中的设置类样式.container加上父级高度便可，这里我就不作过多演示了。缺点也很是明显，本人不建议这样清除浮动。

4.对父级设置overflow:hidden

原理：父元素定义overflow:hidden，此时，浏览器会自动检查浮动区域的高度；

优势：简单，无需增长新的标签；

缺点：不能和position配合使用，由于超出的尺寸的会被隐藏；

代码也是在反作用基础上container中添加上overflow:hidden或者auto便可实现清除浮动效果

结果显示：

优缺点：很完美，可是属性太多；很差分别。