CSS 浮動特性詳解

動是css里面布局用的最多的屬性。

一個span標簽不需要轉成塊級元素, 就能夠設置寬度、高度了。所以能夠證明一件事兒, 就是所有標簽已經不區分行內、塊了。

也就是說, 一旦一個元素浮動了, 那么, 將能夠并排了, 并且能夠設置寬高了, 無論它原來是個div還是個span。

浮動的性質：脫標、貼邊、字圍、收縮。

浮動的元素脫標

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
.box1{
    float: left;
    width: 300px;
    height: 400px;
    background-color: yellowgreen;
}
.box2{
    float: left;
    width: 400px;
    height: 400px;
    background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

兩個元素并排了, 并且兩個元素都能夠設置寬度、高度了。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
span{
    float: left;
    width: 200px;
    height: 200px;
    background-color: orange;
}
</style>
</head>
<body>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
</body>
</html>

一個span標簽不需要轉成塊級元素, 就能夠設置寬度、高度了。所以能夠證明一件事兒, 就是所有標簽已經不區分行內、塊了。

也就是說, 一旦一個元素浮動了, 那么, 將能夠并排了, 并且能夠設置寬高了, 無論它原來是個div還是個span。

浮動的元素互相貼靠

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
body{
    font-size: 60px;
}
.box1{
    float: left;
    width: 100px;
    height: 100px;
    background-color: yellowgreen;
}
.box2{
    float: left;
    width: 120px;
    height: 220px;
    background-color: gold;
}
.box3{
    float: left;
    width: 340px;
    height: 300px;
    background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>

浮動的元素有"字圍"效果

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div{
float: left;
width: 344px;
height: 516px;
background-color: orange;
}
</style>
</head>
<body>
<div>
<img src="images/1.jpg" alt="" />
</div>
<p>123文字文字文字文字文字文字字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文</p>
</body>
</html>

div擋住了p, 但是p中的文字不會被擋住, 形成"字圍"效果。如果將p標記換成div, 則不會有"字圍"效果。

詳細案例見：CSS|實例|圖文混排

收縮：一個浮動的元素, 如果沒有設置width, 那么將自動收縮為文字的寬度(這點非常像行內元素)。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div{
float: left;
background-color: gold;
}
</style>
</head>
<body>
<div>我是文字</div>
</body>
</html>

浮動的清除

實驗：現在有兩個div, div身上沒有任何屬性。每個div中都有li, 這些li都是浮動的。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
li{
float: left;
width: 90px;
height: 40px;
background-color: gold;
/*文本居中*/
text-align: center;
}
</style>
</head>
<body>
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設計模式</li>
</ul>
</div>
<div>
<ul>
<li>學習方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

我們本以為這些li, 會分為兩排, 但是, 第二組中的第1個li, 去貼靠第一組中的最后一個li了。

第二個div中的li, 去貼第一個div中最后一個li的邊了。

原因就是因為div沒有高度, 不能給自己浮動的孩子們, 一個容器。

清除浮動方法1：給浮動的元素的祖先元素加高度。缺陷: 只限于父元素高度確定的情況下。

如果一個元素要浮動, 那么它的祖先元素一定要有高度。高度的盒子, 才能關住浮動。

解決方法:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
div{
height: 50px; /* 為父元素設置高度 */
border: 1px solid #000;
}
li{
float: left;
width: 90px;
height: 40px;
margin-right: 10px;
background-color: gold;
/*文本居中*/
text-align: center;
}
</style>
</head>
<body>
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設計模式</li>
</ul>
</div>
<div>
<ul>
<li>學習方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

清除浮動方法2：clear:both;

網頁制作中, 高度height很少出現。為什么? 因為能被內容撐高! 那也就是說, 剛才我們講解的方法1, 工作中用的很少。

腦弄大開：能不能不寫height, 也把浮動清除了呢? 也讓浮動之間, 互不影響呢?

clear:both;

clear就是清除, both指的是左浮動、右浮動都要清除。意思就是：清除別人對我的影響。

這種方法有一個非常大的、致命的問題, margin失效了。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
li{
float: left;
width: 120px;
height: 40px;
text-align: center;
background-color: orange;
}
.box2{
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設計模式</li>
</ul>
</div>
<div class="box2">
<ul>
<li>學習方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

清除浮動方法3：隔墻法

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
.box1{
background-color: gold;
}
li{
float: left;
width: 120px;
height: 40px;
background-color: orange;
text-align: center;
}
.cl{
clear: both;
}
.h8{
height: 8px;
_font-size:0;
}
.h10{
height: 10px;
_font-size:0;
}
.h12{
height: 12px;
_font-size:0;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設計模式</li>
</ul>
</div>

<div class="cl h8"></div>
<div class="box2">
<ul>
<li>學習方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

墻! <div class="cl h18"></div>

這個墻, 隔開了兩部分浮動, 兩部分浮動, 互不影響。

近些年, 有演化出了"內墻法"：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
.box1{
background-color: gold;
}
li{
float: left;
width: 120px;
height: 40px;
background-color: orange;
text-align: center;
}
.cl{
clear: both;
}
.h16{
height: 16px;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設計模式</li>
</ul>
<div class="cl h16"></div>
</div>
<div class="box2">
<ul>
<li>學習方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

內墻法本質-給沒有高的父親撐出高

因為一個父元素不可能被浮動的子元素撐出高度, 解決的方法：內墻法

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
background-color: blue;
}
p{
float: left;
width: 100px;
height: 100px;
background-color: green;
}
.cl{ /* 如果沒有清除浮動 , 則父元素的盒子沒有高度, <div>盒子只是一條線*/
clear: both;
}
</style>
</head>
<body>
<div>
<p></p>
<div class="cl"></div>
</div>
</body>
</html>

清除浮動方法4：overflow:hidden;

overflow就是"溢出"的意思, hidden就是"隱藏"的意思。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
border: 1px solid red;
overflow: hidden;
}
</style>
</head>
<body>
<div>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div>
</body>
</html>

本意就是清除溢出到盒子外面的文字。但是, 前端開發工程師又發現了, 能做偏方。

一個父親不能被自己浮動的兒子，撐出高度。但是, 只要給父親加上overflow:hidden; 那么, 父親就能被兒子撐出高了。這是一個偏方。

div{
    width: 400px;
    border: 10px solid black;
    overflow: hidden;
}

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
overflow: hidden;
border: 10px solid black;
}
.p1{
float: left;
width: 100px;
height: 150px;
background-color: red;
}
.p2{
float: left;
width: 100px;
height: 380px;
background-color: yellow;
}
.p3{
float: left;
width: 100px;
height: 120px;
background-color: blue;
}
</style>
</head>
<body>
<div>
<p class="p1"></p>
<p class="p2"></p>
<p class="p3"></p>
</div>
</body>
</html>

浮動清除方法5: 利用偽元素清除浮動

Web前端開發-CSS入門干貨01 、Web前端開發-CSS入門干貨02 、Web前端開發-CSS布局-盒子模型入門干貨介紹了CSS重要基礎概念選擇器和字體系列、文本系列、背景系列樣式以及CSS布局中元素的盒子模型，下面介紹CSS布局中另外兩個重要應用浮動和定位。

根據元素浮動、定位的特性可以將CSS布局分為三種：標準流、浮動流、定位流；

其中標準流是利用塊級元素獨占一行、自上而下，行內元素一行顯示、遇到阻礙自動換行、自左向右的布局方式。

1.浮動

（1）什么是浮動

元素脫離原先位置，不再占據空間，相對于未浮動元素類似漂浮在其上面；

浮動元素具有了行內塊元素特性，并實現貼邊布局。這里的邊可以是父級元素的邊也可以是同樣浮動的兄弟級元素的邊。

（2）浮動解決的問題

改變塊級元素默認的垂直布局方式，改為橫向布局。

行內塊樣式（display: inline-block;）也可以改變塊級元素的布局方式，但是不能靈活解決兩個塊級元素之間縫隙、不能靈活解決多個塊級元素分別實現左對齊、右對齊等問題。當然如果想要塊級元素隨意放置，那就要用到定位了。

（3）浮動的語法

選擇器 {float:none/left/right}，對選擇器選擇的元素實現不浮動、左浮動、右浮動。

（4）浮動的典型應用

通過不浮動的塊級元素+嵌套在其內內的浮動元素，實現頁面各種布局。

塊級元素實現縱向布局，浮動的元素實現橫向布局。

（5）因為浮動引出的問題

浮動元素通常嵌套在一個不浮動的元素內，進行配合使用；所有浮動元素的高以及外邊距之和不能超過那個不浮動元素，否則出現重疊。

那么當嵌套的浮動的子元素數量不確定時，那么父級元素的高度就不能確定。為了解決這個問題，提出來不設置父級元素的高度，讓子元素的高度之和成為父元素高度的方式；然而浮動的子元素具有脫離原先位置、不占空間的特點，那么父元素的高度只會是0，在父元素之后的兄弟元素就會與上一個父元素內浮動元素發生重疊。為了解決這個問題，提出來清除浮動。

（6）清除浮動

1）語法

選擇器 {clear:right/left/both};清除選擇器選中的元素的右浮動、左浮動、左右浮動。

2）清除浮動方式

a）額外標簽法

添加一個與浮動元素同級的空標簽（塊級），并為其設置清除浮動的樣式。

<style>
.one {float:left}
.kongbq {clear:both} 
</style>

<div class="box">
<div class="one"> </div>  
<div class="kongbq"> </div>
</div>

b）父級元素添加overflow樣式（常用）

語法：選擇器 {overflow:hidden}

c）父級元素添加after偽元素樣式（常用）

樣式如下：

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

d）父級元素添加雙偽元素（常用）

樣式如下：

.clearfixry:before,.clearfixry:after {
content:"";
display:table;
}
.clearfixry:after {
clear:both;
}
.clearfixry { /*IE6、7專有*/
*zoom:1;
}

2.定位

（1）什么是定位

將html元素放置在任意指定的位置，提高頁面布局的靈活性。

（2）定位解決的問題

比如頁面側邊固定的工具欄、輪播圖

（3）定位的實現方式

利用定位模式+邊偏移，在樣式中設定定位模式，然后設定元素盒子模型邊偏移。

1）邊偏移

包括top、right、bottom、left四個分項。

2）定位模式分類

a）靜態定位（static）：元素無偏移，也即元素本身的默認布局方式。

語法：選擇器 {position:static;}

b）相對定位（relative）：相對元素自身原先位置設置偏移。（常用）

語法：選擇器 {position:relative;}

需要注意的是設置了相對定位的元素仍舊實際占據位置

c）絕對定位（absolute）：相對于元素的擁有定位的父級（或者更高級）元素進行定位。（常用）

語法：選擇器 {position:absolute;}

需要注意的（1）設置的絕對定位的元素的參考依據是有定位模式的父級或者更高級元素的。

（2）設置了絕對定位的元素會有浮動效果，即不再占有位置。

d）固定定位（fixed）：相對于瀏覽器可視區域，在某個位置固定不動。（常用）

語法：選擇器 {position:fixed;}

需要注意的（1）設置的固定定位的元素的參考依據瀏覽器當前可視窗口。

（2）設置了固定定位的元素會有浮動效果，即不再占有位置。

e）粘性定位（sticky）：被認為是相對定位和固定定位的混合。元素在跨越特定偏移前為相對定位，之后為固定定位。

語法：選擇器 {position:sticky; top:10px;}

需要注意的是（1）粘性定位一定要設置邊偏移（任何邊都可行），否則其功能和相對定位相同。

（2）設置的粘性定位的元素的參考依據瀏覽器當前可視窗口。

（3）設置的粘性定位的元素仍舊實際占據位置

#學問分亨官##閃光時刻二期##閃光時刻第二期主題征文#

在線咨詢

上一篇：Django 模板系統解析
下一篇：HTML5 Web 存儲

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS 浮動特性詳解

1.浮動

2.定位

您的項目需求