摘要:如果內容被修剪,則瀏覽器會顯示滾動條以便查看其余的內容。用屬性來指定要插入的內容。的作用是允許瀏覽器渲染它,但是不顯示出來。這個元素的作用就像元素它定義了一個塊級盒子有兩個特性同行等高寬度自動調節(jié)。
浮動造成的常見問題有哪些? 兄弟元素排版錯亂
內聯(lián)元素(行內元素)
如果該兄弟元素是內聯(lián)元素,內聯(lián)元素會盡可能的圍繞在浮動元素的周圍
塊級元素
如果該兄弟元素是塊等元素,塊級元素會無視浮動元素,并且一定程度的覆蓋浮動元素,
文本是屬于行內匿名元素,所以會浮動在內聯(lián)元素周圍,實際div已經嘗試了覆蓋
會在元素換行上有疑問,或許你還會想著通過寬度來解決這個換行問題
因為元素浮動,和未浮動的父元素不在同一個文檔流當中,浮動的元素不能撐起來父元素的高度為什么會造成這種現(xiàn)象?
使用用浮動會讓元素脫離普通流,完成各種定位的同時,會帶來了許多后遺癥
如何解決浮動帶來的問題? 方法一:clear:both含義
不允許改元素的兩邊有浮動的元素
使用情況
更適合用于需要換行,卻因浮動換行失敗的情況
空div是什么個意思?
換行也存在兩種可能性,一種是他緊鄰的兄弟元素要換行,那再這個元素上直接添加clear:both就好,
還有一種是這個元素接下來的元素都要換行,那么我們就悄悄的呢添加一個其實沒有任何意義的div,寫上一個類,里面有clear:both;
還要有height:或者0 line-height: 0;要不然會換行了背景還是會塌陷
含義
overflow 屬性規(guī)定當內容溢出元素框時發(fā)生的事情。
hidden 內容會被修剪,并且其余內容是不可見的。
auto 如果內容被修剪,則瀏覽器會顯示滾動條以便查看其余的內容。
auto對seo較為友好
使用情況
float造成的盒子塌陷
為什么不是裁剪跨出邊界的元素,反而是撐高?
牽涉到BFC機制,overflow:hidden 的意思是超出的部分要裁切隱藏掉,
那么如果float 的元素不占普通流位置普通流的包含塊要根據(jù)內容高度裁切隱藏,
如果高度是默認值auto那么不計算其內浮動元素高度就裁切就有可能會裁掉float,
這是反布局常識的, 所以如果沒有明確設定容器高情況下它要計算內容全部高度才能確定在什么位置, hidden浮動的高度就要被計算進去順帶達成了清理浮動的目標。
簡單說就是overflow會開啟一個計算高度的機制,而這個機制的計算包括float
兼容性
IE6 中需要觸發(fā) hasLayout ——為父元素設置容器寬高或設置 zoom:1
含義
after 選擇器在被選元素的內容后面插入內容。
用 content 屬性來指定要插入的內容。有點貴像空div的高級版
寫法一
div-float:leftdiv-float:leftdiv-float:leftdiv-無float第二個大盒子
寫法二
.clearfix:before, .clearfix:after { content:""; display:table; } .clearfix:after{ clear:both; overflow:hidden; } .clearfix{ zoom:1; }
解析
用after:偽元素在需要清除浮動的大盒子外邊添加了一個看不見(visibility)但是有高度(高度為0)的空內容塊。
visibility:hidden;的作用是允許瀏覽器渲染它,但是不顯示出來。
display:table,這個元素的作用就像