html 高度塌陷(css)幾種小技巧

2021-07-25 05:22:08 字數 659 閱讀 9779

當父元素沒有設定高度,並且子元素塊都向左浮動起來了,那麼父元素就會塌陷

div>

div>

div>//加乙個標籤,清除浮動

div>

優點:適合初學者,相容性 強。

缺點:**不簡練,不利於優化。

#a

優點:相容性強。

缺點:對margin屬性會有影響,不能設負值,會被裁掉。負值絕對定位也不可以。

#a

#a:after

優點:通用,相容性強

缺點:不好記。

charset="utf-8">

高度塌陷問題title>

type="text/css">

#a #a

:after

#a1,#a2

style>

head>

id="a">

id="a1">

div>

id="a2">

div>

div>

body>

html>

css高度塌陷問題

首先什麼是高度塌陷?當我們需要給頁面設定自適應寬高的時候,在文件流中,父元素的高度預設的情況下是被子元素的高度撐開的,子元素的高度就是父元素的高度,當我們給子元素設定了浮動厚,子元素就會脫離文件流 當你第一次給父元素設定自適應的時候,又給子元素設定浮動元素的時候,你就會發現,父元素的高度沒有了,這就...

什麼是CSS高度塌陷?

1.普通定位 塊級元素 按照從上到下的方式逐個排列 行內元素 按照從左到右的方式逐個排列 2.浮動定位 float float left right 它會脫離文件流 3.相對定位 relative 元素會相對於它原來的位置偏移某個距離,改變元素位置後,元素原本的空間依然會被保留 position r...

CSS 浮動和高度塌陷

溢位文字為省略號 p 溢位文字兩行之後為省略號 p 文字 數字的字串兩行之後為省略號 p 1 相鄰塊元素垂直外邊距的合併當上下相鄰的兩個塊元素相遇時,如果上面的元素有下外邊距margin bottom,下面的元素有上外邊距margin top,則他們之間的垂直距離不是margin bottom與ma...