CSS 同級元素浮動分析小結
發(fā)布時間:2018-12-14 15:30:08 作者:_action_
我要評論

這篇文章主要介紹了CSS 同級元素浮動分析小結的相關資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
float:left/right/none;
1.同級浮動
(1)使塊級元素在同一行顯示(所有要在同一行顯示的都要加浮動)
<div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div> .box1{ border: 2px solid red; width: 40px; height:100px; float:left; } .box2{ border: 6px solid black; width:100px; height:40px; float:left; } .box3{ border: 12px solid blue; width:100px; height:300px; float:left; }
(2)使行內元素支持寬和高
<span class="box1"></span> .box1{ border: 2px solid red; width: 40px; height:100px; float:left; }
3.不設寬或高時,寬和高由內容撐開;
<span class="box1">hello</span> .box1{ border: 2px solid red; float:left; }
4.如果在某個元素上添加浮動,它將脫離標準文檔流(文檔流是指對象在文檔所占的位置),并且向后找沒有浮動的元素覆蓋在上面(向后浮動),跟前面的元素沒有關系。
<div class="box1"></div> <div class="box2"></div> <div class="box3"></div> .box1{ border: 1px solid red; width: 40px; height:100px; float:left; } .box2{ border: 4px solid blue; width: 140px; height:40px; float:left; } .box3{ border: 8px solid gray; width: 200px; height:200px; }
5.如果某個元素加了浮動,它先脫離標準流,在根據(jù)浮動方向浮動,直到碰到上一浮動元素的邊界停下來,或者因為上一層不能放下該元素而掉下來,在下一行;
<div class="box1"></div> <div class="box2"></div> <div class="box3"></div> .box1{ border: 11px solid red; width: 40px; height:100px; float:right; } .box2{ border: 4px solid blue; width: 140px; height:40px; float:left; } .box3{ border: 8px solid gray; width: 200px; height:200px; }
6.當一個元素A浮動在一個沒有浮動的元素B上,他會擠掉B的內容原來的位置,甚至擠出
<div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div> .box1{ border: 11px solid red; width: 40px; height:100px; } .box2{ border: 4px solid blue; width: 60px; height:100px; float:left; } .box3{ border: 8px solid gray; width: 200px; height:200px; }
分析時注意如果某一個元素浮動,只 看它前面的一個元素 ,前一個元素也浮動,則并排顯示,如果前一個元素沒有浮動,則相對位置不變;
詳細的分析:http://www.dbjr.com.cn/web/76691.html
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
- 這是一款基于純css3繪制的卡通皮卡丘隨著氣球漂浮動畫特效源碼。畫面中一個卡通版的皮卡丘身上綁著幾個氣球,漂浮在空中,并且皮卡丘不時地眨著眼睛,擺動著雙腿2019-03-22
- 這篇文章主要介紹了css 如何清除浮動的示例代碼,詳細的介紹了浮動到底是什么和清理浮動的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看2018-11-12
- 浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。這篇文章主要介紹了淺談CSS浮動的特性,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做2018-06-05
- 這篇文章主要介紹了CSS3 清除浮動的方法示例的相關資料,通過本文,讓大家可以明白清除浮動的原理和幾種方法,最后得出一種本文認為最好用的方法,感興趣的小伙伴們可以參考2018-06-01
- 這篇文章主要介紹了css布局之定位與浮動的相關資料,需要的朋友可以參考下2018-05-21
- 使元素脫離文檔流,按照指定方向發(fā)生移動,遇到父級邊界或者相鄰的浮動元素停了下來。本文給大家?guī)砹薈SS清除浮動float的三種方法小結,感興趣的朋友跟隨腳本之家小編一起2018-03-13
- 這篇文章主要介紹了淺談css中浮動和清除浮動帶來的影響,通過代碼示例和圖片展示詳細介紹講解了浮動的應用和實現(xiàn)效果,需要的朋友可以參考下2017-08-14
- 本文通過圖文并茂的形式給大家介紹了CSS浮動與清除浮動的實例代碼,非常不錯,具有一定的參考借鑒價值,,需要的朋友可以參考下2019-04-29