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

2021-08-07 19:10:52 字數 694 閱讀 9132

例:

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.給父元素設定overflow

.div0

2.增加乙個子元素,設定clear: both;

"clear:both">

3.給父元素設定float

.div0

缺陷:需要給父元素設定寬度。

4.移動端經常使用的方法

給父元素新增類class="clearfix"

.clearfix::after,.clearfix::before

/*偽元素before相當於在當前元素的第乙個子元素前插入乙個元素,after則是在之後插入乙個元素*/

//注:為區分偽類和偽元素css3提出偽元素使用::,因此為了相容ie8及以下,應使用:after和:before。

子元素設定margin會影響父元素問題

參考 給子元素設定的margin結果作用在父元素身上,類似於 越級偽命令 問題的解決辦法有三種 1 為父元素設定padding。2 為父元素設定border。3 為父元素設定 overflow hidden 如果子元素不是div,p,h1等塊級標籤,而是a,span等行內標籤的話,則不會出現marg...

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

首先我們看一下問題 content style class class content div class content div class content div class content div class content div div 容器可疑包裹div content但是如果我們設定了...

父級元素與子集元素浮動影響的解決

style box box1 box2 style body div class box div class box1 div1 div div class box2 div2 div div body 先看現在的效果 將div1和div2進行左浮動,會發現 父級元素不見了,因為div1和div2脫...