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

2021-09-26 06:39:14 字數 1184 閱讀 2519

首先我們看一下問題

>

.content

style

>

class

=>

class

="content"

>

div>

class

="content"

>

div>

class

="content"

>

div>

class

="content"

>

div>

class

="content"

>

div>

div>

容器可疑包裹div

.content
但是如果我們設定了float屬性就會出現這樣問題

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

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

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

方法一:給父級元素也設定float屬性(不建議)

原理浮動元素可以發現浮動元素
方法二:在父級元素下面加乙個邏輯性塊元素為此元素加屬性clear:both;
.clear

其他風法

給父級加display:inline-block;

//注意修改劇中方式margin:0 auto不管用了

用float可以解決程式設計中的哪些問題:

報紙布局的問題:我們給塊級元素比如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撐...