浮動元素無法撐開父元素問題

首先我們看一下問題

>

.content
style
>
class
=>
class
="content"
>
div>
class
="content"
>
div>
class
="content"
>
div>
class
="content"
>
div>
class
="content"
>
div>
div>

.content

為什麼會出現這樣的情況：因為我們給元素加了float屬性，這個元素就有了浮動流，不能被普通塊級元素發現。

底層原理：設定了float屬性和display：absolute;會被自動轉換為inline-block

inline-block元素的特點是寬高如果不設定會根據內部元素撐起大小設定，而block元素則不然，block元素的高有內部元素撐起，寬預設100%；

方法一：給父級元素也設定float屬性（不建議）

原理浮動元素可以發現浮動元素

方法二：在父級元素下面加乙個邏輯性塊元素為此元素加屬性clear:both；

.clear

其他風法

給父級加display:inline-block;
//注意修改劇中方式margin：0 auto不管用了

報紙布局的問題：我們給塊級元素比如img標籤設定display:inline-block屬性或者inline屬性都不能讓後面緊跟的文字上邊界對齊只能下邊界對齊，這時我們只需要給塊級元素設定float屬性就可以解決

解決子元素設定浮動影響父元素問題

例 lang zh cn charset utf 8 body div0 div2,div3 style head class div0 class div2 div class div3 div div body html 此時父元素div0無法包含子元素，解決辦法 1.給父元素設定overflo...

關於元素絕對定位的父元素問題

在乙個技術群裡看到別人爭論關於子元素絕對定位，父元素要是也是絕對定位了，子元素應該選擇以誰為參照物的問題，我剛開始想都沒想就覺得它應該選擇父元素的父元素為參照物，但是自己寫個例子測試了一下，發現自己被以前書上的那些教程引導錯了，經過測試發現子元素的如果是絕對定位，他的參照父元素應該選擇離它最近的乙個...

子元素使用float，如何撐開父元素

子元素使用float,導致其脫離文件流，父元素塌陷問題的解決方法 html all1 left1 1div left2 1div style clear both div div css left1 left2 all1 這個方法的關鍵在於用了clear both來清除了浮動元素，把父元素all1撐...