解決設定float樣式後父級元素不適應問題

2021-07-26 08:06:34 字數 1772 閱讀 5794

無標題文件title>

第一種解決辦法(這是最好的辦法,沒有任何***):

charset="utf-8">

無標題文件title>

* .box

.box

.pagebtn

.box

.lastbtn

.box

.nextbtn

.box

:after

//after和content是結合使用的缺一不可,意思是在.box的子元素最後面新增乙個content內容,並且設定display為block(目的是想佔width為100%),清除float左右浮動。

style>

head>

class="box">

div>

body>

html>第二種解決辦法(聽說這個方式有不好的地方,但是我用了很久都沒發現):

charset="utf-8">

無標題文件title>

* .box

.box

.pagebtn

.box

.lastbtn

.box

.nextbtn

.box

//新增overflow。

style>

head>

class="box">

div>

body>

html>奇怪的是我給box新增了另外乙個子元素,設定display為absolute或fixed這兩個絕對定位,溢位後不但不擴大box大小,反而對box的大小沒有影響。

我的猜測是絕對定位不僅是脫離文件流,還有就是對父節點沒有依賴,算是完全脫離文件流。而float並不是完全脫離文件流。

然而對其設定positon:relative時超過了父節點的限定範圍時會起到隱藏效果。

無標題文件title>

* .box

.box

.pagebtn

.box

.lastbtn

.box

.nextbtn

.box

.mark

.tian

style>

head>

class="box">

class="mark">

div>

div>

class="tian">

div>

body>

html>最後:解決這個問題的方法當然還有很多,因為相容性不好,我就不一 一枚舉了。

float浮動後,父級元素高度塌陷和遮蓋問題

當子元素不浮動的時候,父元素的高度是由子元素撐起來的。子元素a和b是兩個div,獨佔一行 效果如圖 當子元素b浮動起來之後,父元素高度塌陷到只剩子元素a的高度 效果如圖 當給子元素a div 設定css屬性 display inline 後,a的寬高將不起作用,寬高由內容撐開,即被字母a撐開。此時父...

html設定float後沒有高度解決

url 2.使用after偽類 這種方法就是對父容器使用after偽類和內容宣告在指定的現在內容末尾新增新的內容。經常的做法就是新增乙個 點 因為它比較小不太引人注意。然後我們再利用它來清除浮動 閉合浮動元素 並隱藏這個內容。這種方法相容性一般,但經過各種 hack 也可以應付不同瀏覽器了,同時又可...

QT 繼承QWidget 設定樣式無效解決

在繼承qwidget時,我們在設定樣式表時,不會有效果。原因在於 qwidget的paintevent函式實現為空。此時,需要讓樣式表生效,有兩種方法 不繼承qwidget,繼承qframe。因為qframe 的自帶paintevent函式已做了實現,在使用樣式表時會進行解析和繪製。實現qwidge...