足球盘口软件
当前位置: 足球盘口软件 > 前端 >
css清除浮动,CSS那些事儿

css解除浮动,css浮动

css中的float:

float:left  左浮动

float:right  右浮动

float:none 不浮动

float:inherit 世袭浮动(世襲父成分浮动属性,假若父成分无变化属性,inherit失效卡塔尔(英语:State of Qatar)

更动发生怎么样难点:1.父成分塌陷,未有惊人。2.网页中的临近成分现身异位

消弭浮动的三种方法:

1.手动给父元素增多中度  劣势:借使子成分过多且数据不鲜明,设置较为复杂。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <style type="text/css">
  /*给父级元素添加高度 */
  *{
    padding:0;
    margin:0;
  }
   .news {
   background-color: red;
   border: solid 1px black;
   height:200px;   /*设置高度,如果去掉高度元素塌陷*/      
    } 

 .news img {
  float: left;
  }

 .news p {
  float: right;
  }

    </style>
</head>
<body>
  <div class="news">
    <img src="1.jpg" />
    <p>some text</p>
  </div>
</body>
</html>

2.用clear属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <style type="text/css">
  /* 清除浮动 clear*/
  *{
    margin:0;
    padding:0;
  }
.news {
  background-color: red;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

 .content{
  clear:both;/*两边都清除浮动*/
  } 
    </style>
</head>
<body>

<div class="news">
<img src="1.jpg" />
<p>some text</p>
<div class="content"></div>
</div>
</body>
</html>

3.给父元素增多overflow属性并组成zoom:1行使

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <style type="text/css">
    /* 给父级元素添加overflow:hidden; */
    *{
         margin:0;
         padding: 0;
     }
 .news {
  background-color: red;
  border: solid 1px black;
  overflow: hidden; /*溢出隐藏*/
  zoom:1;/*兼容IE浏览器*/
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }
    </style>
</head>
<body>
    <div class="news">
    <img src="1.jpg" />
    <p>some text</p>
</div>
</body>
</html>

4.给父级成分加多浮动  瑕疵:相邻成分地点极度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <style type="text/css">
  /* 给父级元素添加浮动 */
  *{
    margin:0;
    padding:0;
  }
 .news {
  background-color: red;
  border: solid 1px black;
  float: left;  /* 给父级元素添加浮动 */
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }
    </style>
</head>
<body>
    <div class="news">
    <img src="1.jpg" />
    <p>some text</p>
</div>
</body>
</html>

5.使用:after伪元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <style type="text/css">
  /* 使用伪元素:after添加浮动 */
  *{
    margin:0;
    padding:0;
  }
 .news {
  background-color: red;
  border: solid 1px black;
    }

.news img {
  float: left;
  }

.news p {
  float: right;
  }
  .clearfix:after{
    content: "020";/*在父容器的结尾处放一个空白字符*/
    display: block;
    height: 0; /*让这个空白字符不显示出来*/
    clear: both;
  }
  /* 兼容IE6和IE7,触发haslayout */
  .clearfix{
    zoom:1; 
  } 
    </style>
</head>
<body>
    <div class="news clearfix">
    <img src="1.jpg" />
    <p>some text</p>
</div>
</body>
</html>

 

css中的float: float:left 左浮动 float:right 右浮动 float:none 不调换 float:inherit 继承浮动(世袭父成分浮动属性,假若父成分...

  浮动首纵然由浮动(float)属性招致的页面错位现象,消亡浮动不仅可以排除页面错位的情景,还足以缓解子成分浮动引致父成分背景不能够自适应子成分中度的主题素材。在CSS样式中,首要使用clear属性中的both、left和right 3个属性值消亡由浮动发生的左、右浮动作效果果。

意气风发、浮动现象例子

下边举三个异常的粗略的更换的事例,倘诺一个float_box(背景象为#aff)中蕴涵五个div,且二个是左浮动(float:left),另二个是右浮动(float:right)。在float_box外再增多四个尚无变化属性的div(no_float),那么代码以致预期效果和实效如下:

图片 1图片 2

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css-test</title>
 6     <style>
 7         .float_box{
 8             background-color: #aff;
 9         }
10         .float_left{
11             float:left;
12             width: 200px;
13             height: 100px;
14             border: 2px solid #f00;
15         }
16         .float_right{
17             float:right;
18             width: 200px;
19             height: 100px;
20             border: 2px solid #00f;
21         }
22         .no_float{
23             color: #fff;
24             background-color: #aaa;
25         }
26     </style>
27 </head>
28 <body>
29 <div class="float_box">
30     <div class="float_left">左浮动元素</div>
31     <div class="float_right">右浮动元素</div>
32 </div>
33 <div class="no_float">测试位置</div>
34 
35 </body>
36 </html>

View Code

   图片 3    图片 4

                                     a.预期效果                                                                                 b.实效

                              图1 效果图

二、扫除浮动的方法

1.利用br元素的clear属性

  br标签属性中的clear属性具备left、right和all四个属性值,能够用来杀绝浮动。然则此种方法必要引进一个附加的br标签,破坏了HTML的本来布局。代码如下:

图片 5图片 6

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css-test</title>
 6     <style>
 7         .float_box{
 8             background-color: #aff;
 9             /*zoom: 1;*/
10             /*overflow: hidden;*/
11         }
12         .float_left{
13             float:left;
14             width: 200px;
15             height: 100px;
16             border: 2px solid #f00;
17         }
18         .float_right{
19             float:right;
20             width: 200px;
21             height: 100px;
22             border: 2px solid #00f;
23         }
24         .no_float{
25             color: #fff;
26             background-color: #aaa;
27             /*clear: both;*/
28         }
29     </style>
30 </head>
31 <body>
32 <div class="float_box">
33     <div class="float_left">左浮动元素</div>
34     <div class="float_right">右浮动元素</div>
35     <br clear="all">
36 </div>
37 <div class="no_float">测试位置</div>
38 </body>
39 </html>

View Code

效能如图1(a)所示。

2.运用css样式中的clear属性

  a.引进br标签,可是为其增添css修饰.clear_float{clear:both;},代码如下:

图片 7图片 8

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css-test</title>
 6     <style>
 7         .float_box{
 8             background-color: #aff;
 9             /*zoom: 1;*/
10             /*overflow: hidden;*/
11         }
12         .float_left{
13             float:left;
14             width: 200px;
15             height: 100px;
16             border: 2px solid #f00;
17         }
18         .float_right{
19             float:right;
20             width: 200px;
21             height: 100px;
22             border: 2px solid #00f;
23         }
24         .no_float{
25             color: #fff;
26             background-color: #aaa;
27             /*clear: both;*/
28         }
29         .clear_float{
30             clear: both;
31         }
32     </style>
33 </head>
34 <body>
35 <div class="float_box">
36     <div class="float_left">左浮动元素</div>
37     <div class="float_right">右浮动元素</div>
38     <br class="clear_float">
39 </div>
40 <div class="no_float">测试位置</div>
41 </body>
42 </html>

View Code

作用如图1(a)所示。

  b.在发出变化的因素后的因素中加多.clear_float{clear:both;},防止引入多余的HTML成分,代码如下:

图片 9图片 10

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css-test</title>
 6     <style>
 7         .float_box{
 8             background-color: #aff;
 9             /*zoom: 1;*/
10             /*overflow: hidden;*/
11         }
12         .float_left{
13             float:left;
14             width: 200px;
15             height: 100px;
16             border: 2px solid #f00;
17         }
18         .float_right{
19             float:right;
20             width: 200px;
21             height: 100px;
22             border: 2px solid #00f;
23         }
24         .no_float{
25             color: #fff;
26             background-color: #aaa;
27             /*clear: both;*/
28         }
29         .clear_float{
30             clear: both;
31         }
32     </style>
33 </head>
34 <body>
35 <div class="float_box">
36     <div class="float_left">左浮动元素</div>
37     <div class="float_right">右浮动元素</div>
38 </div>
39 <div class="no_float clear_float">测试位置</div>
40 </body>
41 </html>

View Code

效果如下图:

图片 11

  能够从上海体育场地中看出,就算这种办法清除了转移的大谬不然,可是float成分的父元素高度未有适应float成分的低度(背景没颜色)。

3.利用css中的overflow属性

  为float成分的父成分加多css属性overflow:hidden,也足以消逝浮动且中度适应。可是该属性会使div溢出一些遮掩,存在缺欠。代码如下:

图片 12图片 13

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css-test</title>
 6     <style>
 7         .float_box{
 8             background-color: #aff;
 9             overflow: hidden;
10         }
11         .float_left{
12             float:left;
13             width: 200px;
14             height: 100px;
15             border: 2px solid #f00;
16         }
17         .float_right{
18             float:right;
19             width: 200px;
20             height: 100px;
21             border: 2px solid #00f;
22         }
23         .no_float{
24             color: #fff;
25             background-color: #aaa;
26         }
27     </style>
28 </head>
29 <body>
30 <div class="float_box">
31     <div class="float_left">左浮动元素</div>
32     <div class="float_right">右浮动元素</div>
33 </div>
34 <div class="no_float">测试位置</div>
35 </body>
36 </html>

View Code

功效如图1(a)所示。

注:overflow:visible清除浮动只对ie浏览器有效,overflow:auto消亡浮动且多层嵌套时,会对点击事件发生影响。

4.利用css中的display:table属性

  为float成分的父元素增加css属性display:table,也足防止除浮动且中度适应。然而会挑起不测的结果。代码如下:

图片 14图片 15

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css-test</title>
 6     <style>
 7         .float_box{
 8             background-color: #aff;
 9             display:table;
10         }
11         .float_left{
12             float:left;
13             width: 200px;
14             height: 100px;
15             border: 2px solid #f00;
16         }
17         .float_right{
18             float:right;
19             width: 200px;
20             height: 100px;
21             border: 2px solid #00f;
22         }
23         .no_float{
24             color: #fff;
25             background-color: #aaa;
26         }
27     </style>
28 </head>
29 <body>
30 <div class="float_box">
31     <div class="float_left">左浮动元素</div>
32     <div class="float_right">右浮动元素</div>
33 </div>
34 <div class="no_float">测试位置</div>
35 </body>
36 </html>

View Code

功用如下图所示:

图片 16

5.利用css伪对象::after

  死灭浮动的尺度之一是必得在转移元素之后,由此必须要利用::after而不选拔::before (对于ie浏览器,必要9或以上才支撑卡塔尔(英语:State of Qatar),代码如下:

图片 17图片 18

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css-test</title>
 6     <style>
 7         .float_box{
 8             background-color: #aff;
 9         }
10         .float_left{
11             float:left;
12             width: 200px;
13             height: 100px;
14             border: 2px solid #f00;
15         }
16         .float_right{
17             float:right;
18             width: 200px;
19             height: 100px;
20             border: 2px solid #00f;
21         }
22         .no_float{
23             color: #fff;
24             background-color: #aaa;
25             /*clear: both;*/
26         }
27         .float_box::after{
28             clear: both;
29             display: block;
30             content: "";
31         }
32     </style>
33 </head>
34 <body>
35 <div class="float_box">
36     <div class="float_left">左浮动元素</div>
37     <div class="float_right">右浮动元素</div>
38 </div>
39 <div class="no_float">测试位置</div>
40 </body>
41 </html>

View Code

效果如图1(a)所示。

注:对于ie浏览器,上述办法都亟需在.float_box中添加zoom:1属性,来消除ie的haslayout效果。

返回顶部