資訊專(zhuān)欄INFORMATION COLUMN
摘要：需要注意的是網(wǎng)上說(shuō)的清楚浮動(dòng)原理和這個(gè)一樣當(dāng)然清楚浮動(dòng)還有另外一種方式原理是觸發(fā)浮動(dòng)元素的父元素形成塊級(jí)格式化上下文亦即
最近工作中不時(shí)會(huì)遇到float使用問(wèn)題,由于CSS是一系列屬性疊加的結(jié)果,float經(jīng)常會(huì)和BFC,外邊距折疊等一起出現(xiàn),故而原本簡(jiǎn)單的問(wèn)題卻讓人老是覺(jué)得迷糊,本文記錄一下float的使用以備日后查閱.
首先我們來(lái)看一下最基本的代碼:
Document
上述代碼是一個(gè)div內(nèi)有兩個(gè)子div,由于div是塊級(jí)元素,所以children1和children2會(huì)上下排列:
首先我們給children2加上一個(gè)左浮動(dòng)樣式,即把CSS樣式更改如下:
#parent {
padding: 10px;
border: 3px solid black;
background-color: green;
}
#children1 {
width: 80px;
height: 80px;
background-color: red;
margin-top: 10px;
}
#children2 {
width: 80px;
height: 80px;
background-color: blue;
float: left;
}
顯示結(jié)果如下:
上圖中,由于children2(藍(lán)色方塊)增加了浮動(dòng)樣式,浮動(dòng)樣式不是正常的頁(yè)面流,是獨(dú)立定位的.所以parent塊只包含了children1(紅色方塊),children2就超出了父元素.
上面我們是給children2加上了左浮動(dòng),假若我們是給children1加上了左浮動(dòng)呢?
#parent {
padding: 10px;
border: 3px solid black;
background-color: green;
}
#children1 {
width: 80px;
height: 80px;
background-color: red;
margin-top: 10px;
float: left;
}
#children2 {
width: 80px;
height: 80px;
background-color: blue;
}
顯示結(jié)果如下:
上圖中因?yàn)閏hildren1(紅色方塊)設(shè)置了浮動(dòng)樣式,且浮動(dòng)元素z-index級(jí)別高于普通元素,所以它會(huì)在children2(藍(lán)色方塊)上面顯示.
通常浮動(dòng)元素會(huì)引起父元素高度塌陷,例如當(dāng)我們把CSS文件改成下面這樣的時(shí)候:
#parent {
padding: 10px;
border: 3px solid black;
background-color: green;
}
#children1 {
width: 80px;
height: 80px;
background-color: red;
margin-top: 10px;
float: left;
}
#children2 {
width: 80px;
height: 80px;
background-color: blue;
float: right;
}
顯示結(jié)果如下:
為了清楚浮動(dòng),我們可以在parent塊中增加一個(gè)子塊,并添加如下樣式:
#children3 {
width: 80px;
height: 80px;
background-color: orange;
clear: both;
}
此時(shí)顯示結(jié)果如下:
這樣一來(lái)就可以清楚浮動(dòng)了,原理是父容器現(xiàn)在必須考慮非浮動(dòng)子元素的位置，而后者肯定出現(xiàn)在浮動(dòng)元素下方，所以顯示出來(lái)，父容器就把所有子元素都包括進(jìn)去了。需要注意的是,網(wǎng)上說(shuō)的clearfix清楚浮動(dòng)原理和這個(gè)一樣.
當(dāng)然清楚浮動(dòng)還有另外一種方式,原理是觸發(fā) 浮動(dòng)元素的父元素 形成塊級(jí)格式化上下文,亦即BFC.
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115785.html
摘要：對(duì)于高階組件的使用場(chǎng)景如果有相關(guān)經(jīng)驗(yàn)的或者有不同的見(jiàn)解的希望能夠在我的博客下面留言最近在重構(gòu)組件時(shí)，學(xué)習(xí)了一些高階組件的編寫(xiě)思路，其實(shí)是由高階函數(shù)沿伸而來(lái)。 對(duì)于高階組件的使用場(chǎng)景如果有相關(guān)經(jīng)驗(yàn)的或者有不同的見(jiàn)解的希望能夠在我的博客下面留言 最近在重構(gòu)react組件時(shí)，學(xué)習(xí)了一些高階組件的編寫(xiě)思路，其實(shí)是由高階函數(shù)沿伸而來(lái)。一般情況我們編寫(xiě)一個(gè)react組件大致樣子如下： class ...
摘要：答案核心對(duì)象和對(duì)象子類(lèi)型先看一段解釋第一個(gè)代表對(duì)象。第二個(gè)代表對(duì)象子類(lèi)型。那么問(wèn)題來(lái)了，什么是不嚴(yán)謹(jǐn)?shù)恼f(shuō)，中的所有，都是由對(duì)象衍生出來(lái)的對(duì)象子類(lèi)型包括，和。 問(wèn)題：如題 var obj=new Object(); Object.prototype.toString.call(obj);// [object Object] var arr=new Array(); Object.pro...
摘要：參考的資料前輩們已經(jīng)對(duì)字符編碼講的很好了，通俗易懂。字符編碼的誕生是人類(lèi)對(duì)科學(xué)技術(shù)妥協(xié)的結(jié)果。字符編碼為什么有很多方式。這是從計(jì)算機(jī)層面總體上對(duì)字符編碼的認(rèn)識(shí)。中的一些字符集字符編碼知識(shí) 以前在工作中遇到導(dǎo)出中文亂碼時(shí)，就google一下，看見(jiàn)把utf-8編碼換成GBK之類(lèi)的編碼，導(dǎo)出在Excel中打開(kāi)就不會(huì)亂碼了。只是解決了當(dāng)前問(wèn)題。對(duì)字符編碼沒(méi)有很好的認(rèn)識(shí)。這次又遇到了，遂記錄之。...
閱讀 2212·2021-11-25 09:43
閱讀 1176·2021-11-23 09:51
閱讀 3511·2021-11-23 09:51
閱讀 3636·2021-11-22 09:34
閱讀 1572·2021-10-09 09:43
閱讀 2132·2019-08-30 15:53
閱讀 3171·2019-08-30 14:07
閱讀 579·2019-08-28 18:14
