CSS浮动——浮动的特性、清除浮动

一时失言乱红尘 2022-11-22 12:52 272阅读 0赞

# CSS浮动 #

一个页面基本包含了三种布局方式：标准流、浮动和定位

### 浮动（float） ###

浮动可以改变元素标签默认的排列方式，最典型的是可以让多个块级元素一行内排列显示。

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

float属性用于创建浮动框，将其移动到一边，直到做边缘或右边缘触及包含块或另一个浮动框的边缘。

语法：

选择器: (float: 属性值;)

##### 浮动特性 #####

浮动元素会脱离标准流（脱标）。

浮动元素会一行内显示并且元素顶部对齐。

浮动的元素会具有行内块元素的特性。

设置了浮动的元素脱离标准普通流的控制移动到指定位置，浮动的盒子不再保留原先的位置。

为了约束浮动元素的位置，先使用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。

一般一个元素浮动了，其余的兄弟元素也要浮动。

浮动的盒子只会影响浮动盒子后面的标准流，不会影响他前面的标准流。

##### 清除浮动 #####

清除浮动之后，父级元素就可以根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

语法：

选择器{clear: 属性值}

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>left</td> 
   <td>不允许左侧有浮动元素（清除左侧浮动的影响）</td> 
  </tr> 
  <tr> 
   <td>right</td> 
   <td>不允许右侧有浮动元素（清除右侧浮动的影响）</td> 
  </tr> 
  <tr> 
   <td>both</td> 
   <td>同时清除左右两侧浮动的影响</td> 
  </tr> 
 </tbody> 
</table>

在实际开发中一般只用`clear: both;`

##### 清除浮动的方法 #####

1.  额外标签法也称为隔墙法，是W3C推荐的做法
    
    额外标签法会在浮动元素末尾添加一个空的标签，例如<div style=" clear: both"></div>,或者其他标签。（新添加的标签必须是块级元素）
    
    优点是通俗易懂，书写方便；缺点是添加许多无意义的标签，结构化差
2.  父级添加overflow属性
    
    可以给父级添加overflow属性，将其设置为hidden，auto或scroll。
    
    优点是代码简洁；缺点是无法显示溢出的部分。
3.  父级添加after伪元素
    
    :after方式是额外标签的升级版。给父元素添加
    
        .clearfix:after {
              
            content: "";
            display: block;
            height:0;
            clear: both;
            visibility: hidden;
        }
        .clearfix {
              /* IE6、7专有 */
            *zoom: 1;
        }
    
    优点是没有增加标签，结构更简单；缺点是需要照顾低版本的浏览器。
4.  父级添加双伪元素
    
    给父元素添加
    
        .clearfix:before,
        .clearfix:after {
              
            content:"";
            display:table;
        }
        .clearfix:after {
              
            clear:both;
        }
        .clearfix {
              
            *zoom: 1;
        }
    
    优点是没有增加标签，结构更简单；缺点是需要照顾低版本的浏览器。