完全理解浮動float CSS浮動詳解清除浮動的方法

時間 2019-11-16

標籤完全理解浮動 float css 詳解清除方法欄目 CSS 简体版

原文原文鏈接

咱們把網頁的經常使用的佈局格式分爲如下三種：

1.標準流。

所謂的標準流就是，行內元素本身單獨一行，而塊級元素是上下顯示的。
之前咱們學習的都是標準流。
注意：標準流使咱們網頁佈局中最穩定的一種結構css

2. 浮動流

使咱們學習的脫離標準流的第一種方式。會影響咱們標準流的排列。因此，咱們佈局的時候，能用標準流作的，就不用浮動作。
html

3. 定位流

定位流也是脫離標準流的一種模式。它徹底脫離標準流，不會對標準流有影響。

瀏覽器

浮動(float)

咱們要浮動的目的： 咱們浮動的目的，就是能夠把多個塊級元素放到想要的一行上。

浮動 Float： left   right   none

你不得沒必要須知道詳細的理解浮動：

  1.  浮動已經脫離的標準流。（脫標）

      也就是說，浮動已經漂浮在標準流的上方。

  2. 由於咱們的浮動是左右浮動，因此咱們的塊級元素都是左右排列。

佈局

清除浮動（clear）

若是想要咱們作的網頁瀏覽器兼容性好，首先要保證的是，咱們寫的代碼要足夠標準。

清除浮動的緣由：由於浮動會影響標準流。因此我要根據不一樣狀況來清除浮動。

Clear:both;
學習

1.1.1額外標籤法

W3c推薦，再最後一個浮動的盒子的後面，新添加一個標籤。而後他能夠清除浮動。

優勢：通俗好理解
缺點：增長了太多的標籤
網站

1.1.2Overflow 清除浮動

使用方法：是浮動的大盒子（父級標籤）再樣式裏面加: overflow:hidden;爲了照顧ie6，咱們再加上 zoom:1;

優勢：代碼書寫方便
缺點：若是這個父盒子，裏面還有定位，就會引發麻煩。
ui

1.1.3 After僞類清除浮動

聲明清除浮動：

.clearfix:after{
content:"";
display:block;
visibility:hidden;
clear:both;
height:0;
}
.clearfix{ /* 爲了照顧ie6瀏覽器*/
zoom:1;
}

spa

調用

<div class="box clearfix">
xml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>overflow清除浮動</title>
<style type="text/css">
.clearfix:after{
content:"";
display:block;
visibility:hidden;
clear:both;
height:0;
}
.clearfix{ /* 爲了照顧ie6瀏覽器*/
zoom:1;
}
.box{width:400px;}
.one,.two{width:200px; height:100px; background-color:#093; float:left;}
.two{background-color:#39F;}
.test{width:400px; height:120px; background-color:#900;}

</style>
</head>
<body>
<div class="box clearfix">
<div class="one"></div>
<div class="two"></div>
</div>
<div class="test"></div>
</body>
</html>htm

優勢：一次寫完，後面直接調用就能夠了
缺點：聲明麻煩寫

1.1.4After before僞類清除浮動

聲明清除

.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{ /*照顧ie6*/
zoom:1;
}
使用：
<div class="box clearfix">