出現原因： 1.子元素浮動 2.父元素無浮動 3.父元素高度為自動（也就是沒有設定高度）
**
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
indextitle
>
>
html, body, ul, li
ul,li
.box
.item
style
>
head
>
>
class
="box"
>
class
="item"
>
li>
ul>
body
>
html
>
這裡，ul 標籤沒有設定高度，底色灰色在頁面上可以看到。li標籤設定了40px的高，這時候ul標籤被子標籤li撐開，頁面上效果確實就是我們希望的效果。
當我們給li 新增浮動後
其他**不變
.item
class
="box"
>
class
="item"
>
li>
class
="item"
>
li>
class
="item"
>
li>
ul>
解決方法，最常用的方法：
.clearfix
.clearfix:after
class
="box clearfix"
>
class
="item"
>
li>
class
="item"
>
li>
class
="item"
>
li>
ul>
CSS 浮動和高度塌陷
溢位文字為省略號 p 溢位文字兩行之後為省略號 p 文字 數字的字串兩行之後為省略號 p 1 相鄰塊元素垂直外邊距的合併當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin bottom，下面的元素有上外邊距margin top，則他們之間的垂直距離不是margin bottom與ma...
CSS 浮動，高度塌陷和BFC，清除浮動
通過浮動，可以使乙個元素向其父元素的左側或右側移動，使用 float 屬性來設定元素的浮動 可選值 注意 未設定浮動 設定浮動 浮動的特點 浮動元素會完全脫離文件流，不再佔據文件流中的位置 設定浮動以後元素會向父元素的左側或右側移動 浮動元素預設不會從父元素中移出 浮動元素向左或向右移動時，不會超過...
浮動及清浮動的方式
浮動的特點 1.使塊元素在同一行顯示 2.使內嵌支援寬高 3.不設寬高則由內容撐開 4.脫離文件流，按照指定的乙個方向去移動，直到碰到父級的邊界或者另外乙個浮動元素停止 5.提公升層級半層，元素可以分為上下兩層，下層是具有樣式的元素本身，上層是元素裡的內容，浮動只浮動了半層。所以另乙個元素擠進來的時...