在一次頁面製作的時候，發生了一件匪夷所思的事情，使用css的text-align: center;屬性企圖讓元素內文字水平居中，但是如圖設定後文字並沒有完全居中，然後無論怎麼修改都無法使其水平居中
經過一行行查詢，發現相鄰元素的行高linge-height竟然可以影響到本元素，如圖：
修改後：
可見取消相鄰元素行高後，該元素文字確實水平居中了，但是這種拆東牆補西牆的方法又出現了另乙個問題。。。。。
最後經過排查發現是相鄰元素中的子元素使用了浮動所以導致了該bug的產生，如圖去掉相鄰元素中子元素浮動，對本元素樣式影響消失
所以解決方法就是清除浮動，清除是指清除浮動後所造成的影響（並不是清除浮動），如圖是一種清除浮動的方法，清除浮動後兩個元素樣式都達到了預期
清除是指清除浮動後所造成的影響（並不是清除浮動）
清除主要解決父元素因為子元素浮動引起內部高度為0的問題。
清除浮動後，父元素就會根據子元素自動檢測高度，父元素有了高度就不會影響下邊的標準流
不清除浮動與父元素相鄰元素將使用同一行高line-height
實際開發中，父盒子不方便給高度（無法確定子元素內容有多少），有多少高度看子元素撐開多少
子元素浮動，導致脫離標準流，而且父元素沒有高度相當於height=0，父元素下面的文件流會移動到下側
父元素沒有高度的話，子元素設定浮動脫離了文件流，導致父元素沒有被撐開，沒有高度，父元素下方的元素會向上移動
清除浮動是防止下面的元素移動到設定浮動標籤的下面
父元素無高度
子盒子設定了浮動（標準流會撐開無高度父元素）
影響了下面布局
使用clear屬性清除浮動取值
在最後乙個浮動元素（浮動元素末尾），新增乙個空標籤，並給空標籤設定css屬性clear
給浮動元素的父元素設定屬性overflow為hidden（溢位隱藏）
缺點
在父元素設定高度時，會自動清除超出部分
內容增多時容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢位的元素
：after是指生成新元素放在標籤內部的末尾，（結構上不可見）
在父元素呼叫類
生成新元素放在標籤內部的前面和末尾，（結構上不可見）
塊級元素的浮動與清除
首先要知道,div是一種塊級元素,在標準流中,塊級元素是自上而下排列並且新佔一行的,所以我們可以看到在這裡不論div的寬度設定為多小都會新開一行排列.在實際的頁面編寫過程中很多時候需要在一行顯示多個塊級元素,這時候我們可以設定float屬性來讓乙個塊級元素脫離標準流從而讓其不在單獨佔一行 這裡我們綠...
CSS清除浮動使父級元素展開
乙個沒有設定高度的容器div內如果存在浮動元素 即使用了屬性float left或者float right 那麼該父級元素會無法展開，下面用三種方法解決 源 為 清除子元素的浮動title type text css content left right style head class conte...
css清除浮動使父級元素展開的三個方法
乙個沒有設定高度的容器div內如果存在浮動元素 即使用了屬性float left或者float right 那麼該父級元素會無法展開。舉個例子，有乙個div容器，div容器裡有兩個小容器，分別向左和向右浮動，為了區別這三個容器，分別設定了不同顏色的邊框。產生效果 注意到父級元素content沒有展開...