溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
有的人在寫頁子的時候常常會碰見這樣的一個問題，就是有一個父級的div下面有子元素，子元素浮動起來后，父元素的高度變成0，撐不起來父級了。
現在先不說解決辦法，先說下float屬性，float定義：float 屬性定義元素在哪個方向浮動。以往這個屬性總應用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。（摘自：w3c）。
從定義看出，其實float屬性一開始是被應用與圖片，來形成文字環繞效果的，任何的元素只要定義了float屬相，就自動的變成一個塊級元素，同時本身就擁有了寬、高等屬性。
由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。摘自w3c。 從這句話中看出，其實定義了float屬性后，其自身是脫離普通文檔流的，所以父級就會變為0.
知道原因后，其實很容易找到解決辦法了，那就是清除浮動，或者讓其父元素跟著浮動，還有一種辦法就是其父元素屬性加上 overflow:hidden,下面說下為什么加上這個屬性就會解決這個問題。
這個屬性的定義：overflow 屬性規定當內容溢出元素框時發生的事情。摘自w3c。 看其字面意思，其實就是在他內容超出后所作的措施，那為什么父級加上這個屬性后，浮動就會關閉。overflow:hidden屬性相當于是讓父級緊貼內容，這樣即可緊貼其對象內內容（包括使用float的div盒子），從而實現了清除浮動；
overflow有4個值：
visible 元素的內容在元素框之外也可見，內容超出元素框時不會改變元素框的形狀。
scroll 元素的內容會在元素框的邊界處裁剪，溢出的內容將看不見，但是瀏覽器會使用一個滾動條（或類似的東西）來訪問溢出的內容，不會改變元素本身的形狀。
hidden 元素的內容會在元素框的邊界處裁剪，不過不會提供滾動接口使用戶訪問溢出的內容，也就是說被裁剪的內容對用戶來說不可用。
auto 由瀏覽器自動判斷采用何種行為，不過都建議在必要時提供一個滾動機制。
overflow:hidden可以清楚浮動，overflow:scroll清除浮動時會產生滾動條，overflow:auto清除浮動另外，如果一個絕對定位元素的內容溢出了其內容框，而且overflow設置為要求裁該內容，可以通過使用屬性clip來設置裁剪區域的形狀。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
