浮動(float)以及消除浮動流
語法:float: left / right;
可能的值
| 值 | 描述 |
|---|---|
| left | 元素向左浮動。 |
| right | 元素向右浮動。 |
| none | 預設值。元素不浮動，並會顯示在其在文字中出現的位置。 |
| inherit | 規定應該從父元素繼承 float 屬性的值。 |
功能:無論是display為inline,inline-block,還是block,float都可以讓他站隊
example:
第一種:(下面是inline-block元素)
html程式碼:
<div class="wrapper">
<img src="img/taobaowang.png" >
<img src="img/taobaowang.png" >
<img src="img/taobaowang.png" >
<img src="img/taobaowang.png" >
<img src="img/taobaowang.png" >
<img src="img/taobaowang.png" >
</div>
css程式碼;
*{
margin:0;
padding:0;
list-style:none;
text-decoration:none;
}
.wrapper{
height:450px;
border:1px solid black;
}
img{
width:100px;
border:1px solid black;
}
執行結果:每個img圖片之間有空隙,(下,右右空隙)
當img變成float元素,之間的空隙沒有了
float會讓圖片向左靠齊,之間的空隙也會消失
第二種:(下面是block元素)
html程式碼:
<div class="wrapper">
<div class="con">1</div>
<div class="con">2</div>
<div class="con">3</div>
<div class="con">4</div>
<div class="con">5</div>
<div class="con">6</div>
<div class="con">7</div>
<div class="con">8</div>
<div class="con">9</div>
</div>
css程式碼:
*{
margin:0;
padding:0;
list-style:none;
text-decoration:none;
}//初始化標籤多餘屬性,每次都得寫
.wrapper{
width:350px;
height:350px;
border:1px solid black;
}
.con{
width: 100px;
height:100px;
line-height:100px;
text-align:center;
border:1px solid black;
}
執行結果:
當給每個div增加一個float為float;
執行結果為:
分析:元素設定為float:left,元素會向左浮動,如果父級的寬度不夠(因為這裡的div寬高為100px,父級寬高為350px,寬只能放三個div子元素),那麼元素向下繼續向左浮動
如果上面的div子元素設定為float:right;
執行結果變為:
分析:元素設定為float:right,元素會向右浮動,如果父級的寬度不夠,那麼元素向下繼續向右浮動
如果元素設定為float:none或者float:inherit(此時子元素繼承的是父元素的flat,因為父級沒有float屬性,所以子元素也會沒有float屬性)
浮動流以及浮動流的消除
浮動元素產生了浮動流,塊級元素,看不到他們,他們分層了,產生了bfc的元素和文字類屬性的元素和文字元素可以看到浮動元素
產生原因:父級包住具有浮動元素(子元素都是浮動元素),父級元素且有border屬性,父級的下邊框會包不住子元素,前提是父級元素不設定寬高
html程式碼:
<div class="wrapper">
<div class="con">1</div>
<div class="con">2</div>
<div class="con">3</div>
<div class="con">4</div>
<div class="con">5</div>
<div class="con">6</div>
<div class="con">7</div>
<div class="con">8</div>
<div class="con">9</div>
</div>
css程式碼:
*{
margin:0;
padding:0;
list-style:none;
text-decoration:none;
}
.wrapper{
border:1px solid black;
}
.con{
float:left ;
width: 100px;
height:100px;
line-height:100px;
text-align:center;
border:1px solid black;
}
執行結果:
在下面增加一個<div class="class" style="width:100px;height:100px;background-color:#f00;">我要自由</div>,
本來我們想這樣顯示:
但是卻是這樣顯示:
是不是很搞怪
所以我們必須消除浮動流,下面及介紹集中清除浮動流的方式
第一種:在子元素最後加一個p標籤
在html程式碼變成了:
<div class="wrapper">
<div class="con">1</div>
<div class="con">2</div>
<div class="con">3</div>
<div class="con">4</div>
<div class="con">5</div>
<div class="con">6</div>
<div class="con">7</div>
<div class="con">8</div>
<div class="con">9</div>
<p></p>
</div>
css程式碼中增加:
p{
clear:both;
}
缺點:在程式設計時不能隨便增加一個結構(html標籤就是結構)
第二種:使用偽元素(規範的)
先介紹一下偽元素,偽元素:一個標籤剛出生時,在邏輯的最前面和最後面就已經有兩個偽元素了,只不過不操作他,就看不到
例如在html中寫一個<div>123</div>那麼這個div就有div::before和div::after,這兩個屬性和clear:both;content=""配合使用
在css中寫:
div::before{
content:"前端還是很有意思的呀"
}
div::after{
content:"是的呀";
}
執行結果:
清除浮動流:
html程式碼:
<div class="wrapper">
<div class="con">1</div>
<div class="con">2</div>
<div class="con">3</div>
<div class="con">4</div>
<div class="con">5</div>
<div class="con">6</div>
<div class="con">7</div>
<div class="con">8</div>
<div class="con">9</div>
</div>
<div class="class" style="width:100px;height:100px;background-color:#f00;">我要自由</div>
css程式碼:
*{
margin:0;
padding:0;
list-style:none;
text-decoration:none;
}
.wrapper{
border:1px solid black;
}
.con{
float:left ;
width: 100px;
height:100px;
line-height:100px;
text-align:center;
border:1px solid black;
}
.class{
width:100px;
height:100px;
background-color:#f40;
}
.wrapper::after{
display:block;
clear:both;
content:"";
}
執行結果:
第三種:使用bfc清除浮動(將父元素變成bfc元素)
bfc(black format context)塊級格式化上下文,把html中的每一個標籤都當作一個盒子,每個盒子都有一套渲染規則,bfc可以通過特定的手段,改變盒子內部結構(改變盒子的語法結構)
如何觸發一個盒子的bfc:
A: position:absolute;
B:display:inline-block;
C: float:left / right;
D: overflow:hidden;
這裡的話把偽元素清除浮動css程式碼總的偽元素程式碼改變成:
.wrapper{
float:left;
}
執行結果:
分析:雖然父級解決了邊框包住子級,但是由於父級現在是float元素,對後面的元素還是會產生影響
如果把float變成position:absolute
執行結果:
這樣也不行
如果把position:absolute變成display:inline-block;
執行結果:
這樣好像可以,但是因為父級是inline-block,帶有文字特性,下面會有空隙,還是不行
如果把display:inline-block變成overflow:hidden
執行結果:
這個可以
注意:消除浮動流我們只用偽元素,而且如果元素設定position:absolute或者float:left/right時,那麼這個元素會變成inline-block
例如:
html程式碼:
<span>123</span>
span本來是inline元素
css程式碼:
span{
position:absolute;或者float:left;
width:100px;
height:100px;
background-color:#f40;
}
執行結果:
分析:由於span標籤設定了position:absolute;span本來是行級元素,不可以改變寬高,現在變成了行級塊元素,可以設定寬高