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