CSS清除浮动（逆战班学习论述）

CSS清除浮动

一、什么是浮动？

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

一般用于宽度默认占用一行而需要多个标签并排显示的情况。例如：div、li、p...等等。

二、浮动的写法

写法：

float:left;    左浮动   

float:right;   右浮动

 

三、什么是清除浮动？

字面意思可以理解，清除浮动就是清除掉元素float属性。

四、清除浮动的写法

    写法：

 

clear:left;     清除左浮动

clear:right;    清除右浮动

clear:both;   清除两边浮动

 

 

五、为什么要清除浮动

   浮动导致元素已不在普通流中，所以在排列布局的时候文档中的普通流表现的和浮动元素不存在一样，当浮动元素的高度超出包含框的时候，会出现包含框不会自动撑高来包裹浮动元素，即所谓的“高度塌陷”。

 

如图所示，当div属性为main-centent使用浮动使其内容左右并排之后，高度塌陷，里面的内容并不能将div的高度撑开。

当使用清除浮动之后，如图：

 

里面的内容撑开了父元素的div。

清除浮动不仅能使块元素并排显示，又能使其父元素高度根据其子元素的内容自动撑开高度，方便后期维护添加或者删除内容，其高度不需要再自行设置。

 

六、清除浮动的几种写法：

1、在最后一个浮动标签后，再写一个空白标签，给它设置清除浮动属性  （clear：both；）

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>css清除浮动方法1</title>
 6         <style>
 7             .wrap {
 8                 width: 400px;
 9                 border: 1px solid #FF1493;
10             }
11 
12             .left {
13                 width: 200px;
14                 height: 200px;
15                 background: #f0f;
16                 float: left;
17             }
18 
19             .right {
20                 width: 120px;
21                 height: 120px;
22                 background: #0f0;
23                 float: right;
24             }
25 
26             .footer {
27                 width: 900px;
28                 height: 100px;
29                 background: #f00;
30             }
31 
32             .clear {
33                 clear: both;
34                 /* 清除两边浮动 */
35             }
36         </style>
37     </head>
38     <body>
39         <div class="wrap">
40             <div class="left">big</div>
41             <div class="right">small</div>
42             <div class="clear">清除浮动，防止高度塌陷</div>
43         </div>
44         <div class="footer"></div>
45     </body>
46 </html>

 

效果图：

 

  2、使用after伪元素清除浮动（推荐写法）

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>css清除浮动方法2</title>
 6         <style>
 7             .wrap {
 8                 width: 400px;
 9                 border: 1px solid #FF1493;
10             }
11 
12             .left {
13                 width: 200px;
14                 height: 200px;
15                 background: #f0f;
16                 float: left;
17             }
18 
19             .right {
20                 width: 120px;
21                 height: 120px;
22                 background: #0f0;
23                 float: right;
24             }
25             
26             .wrap:after{
27                 content: "";
28                 clear: both;
29                 display: block;
30             }
31 
32             .footer {
33                 width: 900px;
34                 height: 100px;
35                 background: #f00;
36             }
37 
38         </style>
39     </head>
40     <body>
41         <div class="wrap">
42             <div class="left">big</div>
43             <div class="right">small</div>
44         </div>
45         <div class="footer">after伪元素写法</div>
46     </body>
47 </html>

 

 

 

效果图：

 

优点：符合闭合浮动思想，结构具有语义化

 

缺点：IE6-7不支持伪元素（不过现在更新换代，基本上也不会再使用IE6-7了）

 

使用after伪元素写法，注意属性有三个。

::after{
content: "";    /* 内容 */ 

clear: both;    /* 清除左右浮动 */ 

display: block; /* 设置元素类型为块元素 */ 

}

 

这三个属性是同时存在的，缺一不可。

 

 

结论：当元素需要并排显示，且高度根据子元素内容撑开时，且不影响原有格式，需要用到清除浮动.且清除浮动最实用的写法还是使用after伪元素,给父元素添加:after 、即给父元素下的最后一个子元素后面添加属性。

 

by：成都逆战班-H5-203王超

posted @ 2020-02-23 00:19  王C  阅读(236)  评论(0)    收藏  举报