13.CSS浮动和清除浮动

1.普通流(normal flow)

这个单词很多人翻译为 文档流 ， 字面翻译 普通流 或者标准流都可以。

CSS的定位机制有3种：普通流（标准流）、浮动和定位。

普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。

2.浮动(float)

元素的浮动是指设置了浮动属性的元素会脱离标准标准流的控制，移动到其父元素中指定位置的过程。

在CSS中，通过float属性来定义浮动，其基本语法格式如下：

1 选择器{float:属性值;}

属性值可选如下：

  1. left：元素向左浮动

  2. right：元素向右浮动

  3. none：元素不浮动（默认值）

浮动脱离标准流，俗称脱标，不占位置，会影响标准流，导致塌陷问题。浮动只有左右浮动。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .dv1 {
 8             width: 100px;
 9             height: 100px;
10             background-color: blue;
11             float: left;
12         }
13         .dv2 {
14             width: 120px;
15             height: 120px;
16             background-color: red;
17         }
18     </style>
19 </head>
20 <body>
21     <div class="dv1"></div>
22     <div class="dv2"></div>
23 </body>
24 </html>

浮动首先创建包含块的概念（包裹）。就是说， 浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .dv1 {
 8             width: 150px;
 9             height: 150px;
10             background-color: blue;
11         }
12         .dv2 {
13             width: 100px;
14             height: 100px;
15             background-color: red;
16             float: right;
17         }
18     </style>
19 </head>
20 <body>
21     <div class="dv1">
22         <div class="dv2"></div>
23     </div>
24 </body>
25 </html>

一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .dv1 {
 8             width: 250px;
 9             height: 250px;
10             background-color: blue;
11         }
12         .dv2 {
13             width: 100px;
14             height: 100px;
15             background-color: red;
16             float: left;
17         }
18         .dv3 {
19             width: 100px;
20             height: 100px;
21             background-color: pink;
22             float: left;
23         }
24     </style>
25 </head>
26 <body>
27     <div class="dv1">
28         <div class="dv2"></div>
29         <div class="dv3"></div>
30     </div>
31 </body>
32 </html>

总结：元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少，浮动根据元素书写的位置来显示相应的浮动。浮动的目的就是为了让多个块级元素同一行上显示。

3.清除浮动

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。

准确地说，并不是清除浮动，而是清除浮动后造成的影响。

1）clear清除

在CSS中，clear属性用于清除浮动，其基本语法格式如下：

1 选择器{clear:属性值;}

属性值可选参数：

  1. left：不允许左侧有浮动元素（清除左侧浮动的影响）

  2. right：不允许右侧有浮动元素（清除右侧浮动的影响）

  3. both：同时清除左右两侧浮动的影响

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .dv1 {
 8             width: 100px;
 9             height: 100px;
10             background-color: red;
11         }
12         .dv2 {
13             width: 100px;
14             height: 100px;
15             background-color: blue;
16             float: left;
17         }
18         .dv3 {
19             width: 100px;
20             height: 100px;
21             background-color: pink;
22             clear: both;
23         }
24         .dv4 {
25             width: 100px;
26             height: 100px;
27             background-color: green;
28         }
29     </style>
30 </head>
31 <body>
32     <div class="dv1"></div>
33     <div class="dv2"></div>
34     <div class="dv3"></div>
35     <div class="dv4"></div>
36 </body>
37 </html>

2）额外标签法

优点： 通俗易懂，书写方便

缺点： 添加许多无意义的标签，结构化较差。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .dv1 {
 8             width: 100px;
 9             height: 100px;
10             background-color: red;
11             float: left;
12         }
13         .dv2 {
14             width: 100px;
15             height: 100px;
16             background-color: blue;
17         }
18     </style>
19 </head>
20 <body>
21     <div class="dv1"></div>
22     <div style="clear: both"></div>
23     <div class="dv2"></div>
24 </body>
25 </html>

3）父级添加overflow属性方法

1 可以给父级添加： overflow为 hidden|auto|scroll  都可以实现。

优点： 代码简洁

缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .parent1 {
 8             width: 100px;
 9             background-color: blue;
10             overflow: hidden;
11         }
12         .parent2 {
13             width: 100px;
14             height: 100px;
15             background-color: red;
16         }
17         .child {
18             width: 50px;
19             height: 50px;
20             background-color: pink;
21             float: left;
22         }
23     </style>
24 </head>
25 <body>
26     <div class="parent1">
27         <div class="child"></div>
28     </div>
29     <div class="parent2"></div>
30 </body>
31 </html>

4）使用after伪元素清除浮动

:after 方式为空元素的升级版，好处是不用单独加标签了

优点： 符合闭合浮动思想 结构语义化正确

缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .parent1 {
 8             width: 100px;
 9             background-color: blue;
10         }
11         .parent2 {
12             width: 100px;
13             height: 100px;
14             background-color: red;
15         }
16         .child {
17             width: 50px;
18             height: 50px;
19             background-color: pink;
20             float: left;
21         }
22         .clearfix:after {
23             content: "";
24             display: block;
25             clear: both;
26             visibility: hidden;
27         }
28         .clearfix {
29             *zoom: 1;
30         }
31     </style>
32 </head>
33 <body>
34     <div class="parent1 clearfix">
35         <div class="child"></div>
36     </div>
37     <div class="parent2"></div>
38 </body>
39 </html>

posted @ 2020-03-12 22:15  码海无际  阅读(211)  评论(0)    收藏  举报