CSS清除浮动的四种方法-云码酷-站长自学网-HTML自学教程

马上注册，自学更多教程，下载更多资源。

您需要登录才可以下载或查看，没有帐号？立即注册

x

为何要肃清浮动

浮动素质是用去做一些笔墨混排结果的，可是被我们拿去做规划用，则会有许多的成绩呈现。

因为浮动元素没有再占用本文档流的地位，以是它会对前面的元素排版发生影响，为理解决那些成绩，此时便需求正在该元素中肃清浮动。

精确天道，并非肃清浮动，而是肃清浮动后酿成的影响

假如浮动一开端便是一个斑斓的毛病，那末请用准确的办法援救它。

肃清浮动素质

肃清浮动次要为理解决女级元素由于子级浮动惹起内乱部下度为0 的成绩。

肃清浮动的办法

素质叫做闭开浮动更好一些, 记着，肃清浮动便是把浮动的盒子圈到内里，让女盒子闭开出心战进口没有让他们出去影响其他元素。

正在CSS中，clear属性用于肃清浮动，其根本语法格局以下：

[CSS] 杂文本检察 复造代码

选择器{clear:属性值;}   clear 清除 
 
属性值        描述
left         不允许左侧有浮动元素（清除左侧浮动的影响）
right        不允许右侧有浮动元素（清除右侧浮动的影响）
both         同时清除左右两侧浮动的影响

分外标签法

W3C保举的做法是经由过程正在浮动元素开端增加一个空的标签比方 <div style=”clear:both”></div>，或则其他标签br等亦可。

长处：浅显易懂，誊写便利

缺陷：增加很多偶然义的标签，构造化较好。

女级增加overflow属性办法

能够经由过程触收BFC的方法，能够完成肃清浮动结果。

能够给女级增加： overflow为 hidden|auto|scroll 皆能够完成。

长处：代码简约

缺陷：内乱容增加时分简单形成没有会主动换止招致内乱容被躲藏失落，没法显现需求溢出的元素。

利用after真元素肃清浮动

:after 方法为空元素的晋级版，益处是不消零丁减标签了

利用办法：

[CSS] 杂文本检察 复造代码

.clearfix:after { 
    content: ""; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;  
}   
 
.clearfix {*zoom: 1;}   /* IE6、7 专有 */

长处：契合闭开浮动思惟构造语义化准确

缺陷：因为IE6-7没有撑持:after，利用 zoom:1触收 hasLayout。

代表网站：百度、淘宝网、网易等

留意： content:”” 只管没有带面

利用before战after单真元素肃清浮动

利用办法：

[CSS] 杂文本检察 复造代码

.clearfix:before,.clearfix:after { 
      content:"";
      display:table;  /* 这句话可以出发BFC BFC可以清除浮动 */
}
 
.clearfix:after {
     clear:both;
}
 
.clearfix {
      *zoom:1;
}

长处：代码更简约

缺陷：因为IE6-7没有撑持:after，利用 zoom:1触收 hasLayout。

代表网站：小米、腾讯等

上一篇：http形态码详解