浮動
網(wǎng)頁布局的核心护赊，就是用CSS來擺放盒子位置。如何把盒子擺放到合適的位置舀武？
CSS的擺放盒子的方式有3種：普通流（標準流）盒子模型拄养、浮動和定位。
浮動的框可以向左或向右移動银舱，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止瘪匿。
由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣寻馏。
案例地址: https://github.com/pengjunshan/WebPJS/HtmlCss
其它Web文章
Html+Css基礎(chǔ)學習第一章
CSS基礎(chǔ)學習之第二章
CSS定位relative棋弥、absolute、fixed使用總結(jié)
原生開發(fā)WebApi知識點總結(jié)
開發(fā)中常用jQuery知識點總結(jié)
C3動畫+H5+Flex布局使用總結(jié)
ES6常用知識總結(jié)
Vue學習知識總結(jié)
開發(fā)環(huán)境到生產(chǎn)環(huán)境配置webpack
待續(xù)......
本編文章會講到的知識點
- 普通流
- 浮動介紹
- 浮動的特性
- 浮動實現(xiàn)常見的布局方式
- 清除浮動的影響
普通流
普通流 normal flow诚欠，這個單詞很多人翻譯為 文檔流 顽染，字面翻譯 普通流 或者標準流都可以漾岳。
普通流實際上就是一個網(wǎng)頁內(nèi)標簽元素正常從上到下，從左到右排列順序的意思粉寞，比如塊級元素會獨占一行尼荆，行內(nèi)元素會按順序依次前后排列；按照這種大前提的布局排列之下絕對不會出現(xiàn)意外外的情況叫做普通流布局唧垦。
浮動介紹
為什么需要浮動捅儒？
浮動的目的，就是為了更好的實現(xiàn)排列布局业崖。在標準流中野芒，也可以實現(xiàn)排列布局，但是存在問題双炕，比如三個div盒子怎么橫排一列？
理想效果
標準流實現(xiàn)代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
display: inline-block;
}
.l,.r{
width: 100px;
height: 100px;
background: gray;
}
.c{
width: 200px;
height: 100px;
background: gold;
}
</style>
</head>
<body>
<div class="l">左</div>
<div class="c">中</div>
<div class="r">右</div>
</body>
</html>
標準流處理效果
浮動實現(xiàn)代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
float: left;
}
.l,
.r {
width: 100px;
height: 100px;
background: gray;
}
.c {
width: 200px;
height: 100px;
background: gold;
}
</style>
</head>
<body>
<div class="l">左</div>
<div class="c">中</div>
<div class="r">右</div>
</body>
</html>
浮動處理效果
浮動的使用方式
| 語法 | 作用 | 示例 |
|---|---|---|
| float: left; | 左浮動 | div {float: left;} |
| float: right; | 右浮動 | div {float: right;} |
浮動的特性
特點一：脫離標準文檔流[普通流]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.one {
width: 100px;
height: 100px;
background: blue;
float: left;
}
.two {
width: 300px;
height: 200px;
background: gold;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
浮動元素脫離文檔流
特點二：浮動找浮動
浮動找浮動（一定是多個連續(xù)浮動的盒子）撮抓。
案例中浮動2妇斤、3、4都浮動不占據(jù)位置了丹拯，脫離了文檔流所以5自然就上去了和1的底部并起站超。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.one,.five{
width: 400px;
height: 300px;
background: blue;
}
.two,.three,.four{
width: 100px;
height: 100px;
background: gold;
border:1px solid red;
float: left;
}
</style>
</head>
<body>
<div class="one">沒有浮動1</div>
<div class="two">浮動2</div>
<div class="three">浮動3</div>
<div class="four">浮動4</div>
<div class="five">沒有浮動5</div>
</body>
</html>
浮動找浮動
特點三：多個浮動的元素，以頂部基準對齊
多個浮動的元素（一定是多個連續(xù)浮動的元素）,不管浮動元素的高是否相等乖酬，都以頂部基準對齊死相。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.one,
.five {
width: 300px;
height: 300px;
background: gold;
border: 1px solid blue;
}
.two,
.three,
.four {
width: 50px;
height: 50px;
background: red;
border: 1px solid pink;
float: left;
}
.three {
height: 100px;
width: 80px;
}
.four {
height: 20px;
width: 60px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
</body>
</html>
多個浮動的元素，以頂部基準對齊
浮動會改變元素的顯示模式
浮動后的元素變成了行內(nèi)塊元素咬像。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
span {
width: 100px;
height: 100px;
border: 1px solid red;
background: gold;
/*
浮動會改變元素的顯示模式算撮，變?yōu)樾袃?nèi)塊級元素
*/
float: left;
}
</style>
</head>
<body>
<span>aaaaaa</span>
<span>bbbbbb</span>
</body>
</html>
浮動改變元素顯示模式
文字環(huán)繞浮動的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {
width:800px;
border:1px solid #666;
margin: 0 auto;
}
img {
width:300px;
float:right;
margin:10px;
}
</style>
</head>
<body>
<div>
<img src="../../../img/jj.png" >你瞅啥，瞅你咋地你瞅啥县昂，瞅你咋地你瞅啥肮柜，瞅你咋地你瞅啥，瞅你咋地你瞅啥倒彰，
瞅你咋地你瞅啥审洞，瞅你咋地你瞅啥，瞅你咋地你瞅啥待讳，瞅你咋地你瞅啥芒澜，瞅你咋地你瞅啥，瞅你咋地你瞅啥创淡，
瞅你咋地你瞅啥痴晦，瞅你咋地你瞅啥，瞅你咋地你瞅啥辩昆，瞅你咋地你瞅啥阅酪，瞅你咋地你瞅啥旨袒，瞅你咋地你瞅啥，
瞅你咋地你瞅啥术辐，瞅你咋地你瞅啥砚尽，瞅你咋地你瞅啥，瞅你咋地你瞅啥辉词，瞅你咋地你瞅啥必孤，瞅你咋地你瞅啥，
瞅你咋地你瞅啥瑞躺，瞅你咋地你瞅啥敷搪，瞅你咋地你瞅啥，瞅你咋地你瞅啥幢哨，瞅你咋地你瞅啥赡勘，瞅你咋地你瞅啥，
瞅你咋地你瞅啥捞镰，瞅你咋地你瞅啥闸与，瞅你咋地你瞅啥，瞅你咋地你瞅啥岸售，瞅你咋地你瞅啥践樱，瞅你咋地你瞅啥，
瞅你咋地你瞅啥凸丸，瞅你咋地你瞅啥拷邢，瞅你咋地你瞅啥，瞅你咋地你瞅啥屎慢，瞅你咋地你瞅啥瞭稼，瞅你咋地你瞅啥，
瞅你咋地你瞅啥抛人，瞅你咋地你瞅啥弛姜，瞅你咋地你瞅啥，瞅你咋地你瞅啥妖枚，瞅你咋地你瞅啥廷臼，瞅你咋地你瞅啥，
瞅你咋地你瞅啥绝页，瞅你咋地你瞅啥荠商，瞅你咋地你瞅啥，瞅你咋地你瞅啥续誉，瞅你咋地你瞅啥莱没，瞅你咋地你瞅啥，
瞅你咋地你瞅啥酷鸦，瞅你咋地你瞅啥饰躲，瞅你咋地你瞅啥牙咏，瞅你咋地你瞅啥，瞅你咋地你瞅啥嘹裂，瞅你咋地你瞅啥妄壶，
瞅你咋地你瞅啥，瞅你咋地你瞅啥寄狼，瞅你咋地你瞅啥俗慈，瞅你咋地你瞅啥持寄，瞅你咋地你瞅啥猎荠，瞅你咋地你瞅啥官套，
瞅你咋地你瞅啥，瞅你咋地你瞅啥删咱，瞅你咋地你瞅啥屑埋，瞅你咋地你瞅啥，瞅你咋地你瞅啥痰滋，瞅你咋地你瞅啥雀彼，
瞅你咋地你瞅啥，瞅你咋地你瞅啥即寡，瞅你咋地你瞅啥，瞅你咋地你瞅啥袜刷，瞅你咋地你瞅啥聪富，瞅你咋地你瞅啥，
瞅你咋地你瞅啥著蟹，瞅你咋地你瞅啥墩蔓，瞅你咋地你瞅啥，瞅你咋地你瞅啥萧豆，瞅你咋地你瞅啥奸披，瞅你咋地你瞅啥，
瞅你咋地你瞅啥涮雷，瞅你咋地你瞅啥阵面，瞅你咋地你瞅啥，瞅你咋地你瞅啥洪鸭，瞅你咋地你瞅啥样刷，瞅你咋地你瞅啥，
</div>
</body>
</html>
文字環(huán)繞浮動元素
清除浮動的影響
為什么要清除浮動的影響
由于浮動元素不再占用原文檔流的位置览爵，所以它會對后面的元素排版產(chǎn)生影響置鼻，為了解決這些問題，此時就需要在該元素中清除浮動的影響蜓竹。
看下圖箕母，在藍色盒子浮動的情況下黑色盒子會上浮储藐，這種效果并不是我們想要的。
浮動的影響
清除浮動影響的方式
方式一：給父元素增高
缺點：在實際開發(fā)中嘶是，對于顯示的內(nèi)容的區(qū)域钙勃，一般情況高度不能寫死，因為內(nèi)容顯示的數(shù)量不確定俊啼。所以對于內(nèi)容區(qū)域顯示的高度肺缕，應當由內(nèi)容自適應。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
* {
margin: 0;
padding: 0;
}
.father,
.uncle {
width: 1200px;
margin: 0 auto;
}
.father {
border: 1px solid;
height: 200px;
}
.father .son {
height: 200px;
background: blue;
border: 1px solid red;
}
.father .son1 {
width: 300px;
float: left;
}
.father .son2 {
width: 890px;
float: right;
}
.uncle {
height: 300px;
background: #000;
}
</style>
</head>
<body>
<div class="father">
<div class="son son1"></div>
<div class="son son2"></div>
</div>
<div class="uncle"></div>
</body>
</html>
方式二：樣式屬性clear
內(nèi)隔墻法：在父元素的內(nèi)部最后一行設(shè)立一道墻（設(shè)立一個div）對所設(shè)立的墻授帕，添加一個樣式屬性clear:both;外隔墻法：在父元素外部設(shè)立一道墻（設(shè)立一個div）對所設(shè)立的墻同木，添加一個樣式屬性clear:both;
缺點：每次清除浮動都要加一個標簽，當一個頁面清除浮動比較多時跛十，冗余的標簽也會越來越多彤路。文件就會越來越大，傳輸?shù)乃俣认鄬碚f越來越慢芥映，影響程序的性能洲尊。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
* {
margin: 0;
padding: 0;
}
.father,
.uncle {
width: 1200px;
margin: 0 auto;
}
.father {
border: 1px solid;
}
.father .son {
height: 200px;
background: blue;
}
.father .son1 {
width: 300px;
float: left;
}
.father .son2 {
width: 890px;
float: right;
}
.uncle {
height: 300px;
background: #000;
}
.clearfix {
clear: both;
}
</style>
</head>
<body>
<div class="father">
<div class="son son1"></div>
<div class="son son2"></div>
<!--
內(nèi)隔墻法，就是在父元素的內(nèi)部最后一行添加一個塊級標簽
給這個塊級標簽設(shè)定一個樣式屬性:
clear:left|right|both
-->
<div class="clearfix"></div>
</div>
<!--外隔墻法：
在父元素外部設(shè)立一道墻（設(shè)立一個div）
對所設(shè)立的墻奈偏，添加一個樣式屬性clear:both-->
<div class="clearfix"></div>
<div class="uncle"></div>
</body>
</html>
方式三：樣式屬性overflow:hidden;
給父元素加上一個overflow:hidden就是可以清除浮動 的影響坞嘀。
缺點：這是一個偏方，雖然可以達到清除浮動的影響的效果惊来，但是若父元素中有【定位】（后面講）丽涩，會把溢出的部分給隱藏掉。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
* {
margin:0;
padding: 0;
}
.father,.uncle {
width:1200px;
margin:0 auto;
}
.father {
border:1px solid;
/* 可以清除浮動影響的樣本屬性 */
overflow:hidden;
}
.father .son {
height:200px;
background:blue;
}
.father .son1 {
width:300px;
float:left;
}
.father .son2 {
width:890px;
float:right;
}
.uncle {
height:300px;
background:#000;
}
.clearfix {
clear:both;
}
</style>
</head>
<body>
<div class="father">
<div class="son son1"></div>
<div class="son son2"></div>
</div>
<div class="uncle"></div>
</body>
</html>
方式四：:after偽元素
借助給父元素加:after偽元素實現(xiàn)（本質(zhì)上是在模擬內(nèi)隔墻法）,
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {zoom: 1;} / IE6裁蚁、7 專有 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
* {
margin:0;
padding: 0;
}
.father,.uncle {
width:1200px;
margin:0 auto;
}
.father {
border:1px solid;
}
.father .son {
height:200px;
background:blue;
}
.father .son1 {
width:300px;
float:left;
}
.father .son2 {
width:890px;
float:right;
}
.uncle {
height:300px;
background:#000;
}
.clearfix {
clear:both;
}
.clearfix:after {
/*
偽元素默認是行內(nèi)元素
*/
content:".";
clear:both;
display:block;
height:0;
visibility:hidden;
}
.clearfix {
/* IE6矢渊、7 專有 */
*zoom:1;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="son son1"></div>
<div class="son son2"></div>
</div>
<div class="uncle"></div>
</body>
</html>
方式五：使用before和after雙偽元素清除浮動
.clearfix:before,.clearfix:after {
content:"";
display:block;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
* {
margin: 0;
padding: 0;
}
.father,
.uncle {
width: 1200px;
margin: 0 auto;
}
.father {
border: 1px solid;
}
.father .son {
height: 200px;
background: blue;
}
.father .son1 {
width: 300px;
float: left;
}
.father .son2 {
width: 890px;
float: right;
}
.uncle {
height: 300px;
background: #000;
}
.clearfix {
clear: both;
}
.clearfix:before,
.clearfix:after {
content: "";
display: block;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="son son1"></div>
<div class="son son2"></div>
</div>
<div class="uncle"></div>
</body>
</html>
解決浮動影響效果
實際工作中浮動使用還是很多的，剛開始學習的時候被浮動搞得一臉懵逼枉证，記錄下來大家一起看矮男。
