解決子元素浮動父元素高度為0

阿新 • • 發佈：2019-02-08

我們在CSS中使用float的時候常常會發現父元素的高度為0，如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素全浮動父元素高度為0</title>
    <style type="text/css">
        .box{
            /*border:1px solid #ccc;*/
            /*overflow: hidden;*/
            /*float:left;*/ 

        }
        .div{
            width: 100px;
            height: 100px;
            margin-right: 10px;
            float: left;
        }
        .div1{
            background-color: #96f;
        }
        .div2{
            background-color: #096;
        }
        .div3{
            background-color 
: purple;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="div div1"></div>
        <div class="div div2"></div>
        <div class="div div3"></div>
        <!-- <div style="clear:both"></div> --> 

    </div>
</body>
</html>

圖

可以看到在class為box的div下有三個div,但是父元素沒有被撐開,原因為：

我們在給每個子元素div加了float的屬性，導致子元素脫離了當前的文件流

解決的辦法：

要是可以的話，把屬性設定為display:inline-block

.div{
            width: 100px;
            height: 100px;
            margin-right: 10px;
            /*float: left;*/
            display: inline-block;
        }

父元素被撐開
這裡要注意，用inline-block後子元素之間會產生間距
也能把body元素撐開

2. 給父元素加一個overflow:hidden的屬性，子元素還是float:left

.box{
        overflow: hidden;
    }

能把body元素撐開

3.給父元素加一個float:left/right,一起脫離文件流

 .box{
    float:left;
}

不能把body元素撐開

4.在最後加一個div設定屬性clear:both

<div class="box">
        <div class="div div1"></div>
        <div class="div div2"></div>
        <div class="div div3"></div>
        <div style="clear:both"></div>
    </div>

能把body撐開

解決子元素浮動父元素高度為0

我們在CSS中使用float的時候常常會發現父元素的高度為0，如下 <!DOCTYPE html> <html lang="en"> <head> &l

css子元素浮動之後父級的高度為0的解決方法

分析: 浮動float屬性會使得元素脫離當前HTML文件流，那麼會使得：當前HTML文件會當作設定float屬性的元素不存在一樣，所以可以看作父元素#container內根本沒有內容，div在沒內容的時候表現正好是高度=0. 解決方法： 1、設定父元素float 2、在最後

浮動元素的父元素高度塌陷問題解決

overflow:hidden;隱藏溢位，當內容超過其父元素時，可以使用該屬性和值將溢位的部分裁剪掉，使頁面更加美觀清除浮動，當子元素浮動時，給父元素新增overflow：hidden，按照它的第一個特性，應該將子元素超出的部分截掉，但是因為子元素有浮動，無法裁剪，所有隻能由父元素增加高度去包裹住子元素，使得

父元素為一個div，寬度高度不固定，子元素是一個塊狀元素，寬高已知，如何實現子元素在父元素內水平、垂直居中？

父元素為一個div，子元素是一個塊狀元素，寬高已知，如何實現子元素在父元素內水平、垂直居中？ 1、 //利用相對定位，讓子元素垂直居中 <!DOCTYPE html> <html> <head> <title><

浮動之後子元素在父元素哪個位置

浮動定為是CSS中重要的排版手段，比如首字的放大和圖文混排，float浮動可以設定left right 和none，當設定左或右浮動時元素會向父元素的左側或右側靠近，這個距離是怎麼回事呢？我們來看下沒浮動之前float1的寬度充滿整個父塊，空隙是僅僅就是父塊的內邊距加上它自己的外邊距浮動之

設定絕對定位對於子元素繼承父元素的高度的影響

筆者在寫網頁時，發現一個問題，當一個父元素沒有設定高度，而全靠子元素1撐起高度時，此時子元素2就無法繼承父元素的100%高度，程式碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset

CSS子元素跟父元素的高度一致

絕對定位方法：（1）將父元素設定為相對定位，不寫父元素的高度時，會隨著左邊的子元素高度變化而變化 .parent { /*關鍵程式碼*/ position: relative; /*其他樣式*/ width: 800px;

js在父元素上添加點擊事件，怎麽阻止子元素繼承父元素的點擊事件？

!= fun 元素 spa clas urn else target click div.onclick = function(ev){ if(ev.target!=this) return; else { ... } }js在父元素

讓子元素在父元素中水平居中align-items

lex 交叉點理解 item ima mar enter spl eas 做案例中，我們會發現讓子元素在父元素中垂直居中，要設置margin和padding等，各種設置才能垂直居中現在可以使用CSS3中的align-items實現 align-items 定義子元素在

子元素scroll父元素容器不跟隨滾動JS實現

方法事件 tip 滾動頁面學習 ima 使用方法阻止補充小tip: 子元素scroll父元素容器不跟隨滾動JS實現本文地址（轉載）：http://www.zhangxinxu.com/wordpress/?p=5092 一、開場暖身網上常見蹲來蹲去的

Vue.js如何獲得兄弟元素，子元素，父元素（DOM操作）

<button @click = “clickfun($event)”>點選</button> methods: { clickfun(e) { // e.target 是你當前點選的元素 // e.currentTarget 是你繫結事件的元素 } }, #獲得點選元素的

解決子標籤浮動後父級標籤邊框塌陷問題

啥都不說咋們直接上解決辦法：第一種方法：父標籤div中新增overflow：hidden；第二種方法：子標籤中新增clear：both；（如果子元素都需要新增float浮動，可以在父標籤裡面再新增一個空的div，div樣式裡面新增clear：both；）；第三種方法：給父級元素設定

子元素等分父元素,平分

方式一: 父級元素定義display:flex,子元素寬度用flex來定義,flex:1 是均分父級元素。佔的比例相同（蘋果6部分低版本瀏覽器不支援, 儘量不要用） .user-set{ &nb

純CSS讓子元素突破父元素的寬度限制

純CSS讓子元素突破父元素的寬度限制在寫樣式中，我們可以經常看到這樣的情況程式碼如下 <div style="width: 300px;border: 4px solid #000;margin: 20px;padding: 2px;"> 父元素

CSS子元素選擇父元素

通常一個CSS選擇器都是從上往下選擇的，通過父元素選擇子元素，那麼能不能通過子元素選擇父元素呢？ <ul> <li> <a href="#" class="active">1</a> </li>

artDialog實現子視窗向父元素傳遞資料

案例：在頁面A點選按鈕，彈出artDialog視窗B，當關閉視窗B時，實現向父元素A傳遞資料。一、方法一： 1、利用artdialog中的data方法進行傳值與接收值。在子視窗呼叫：artDialog

Vue.js 獲得兄弟元素，子元素，父元素（DOM操作）

pre lin col bsp 操作 attr current 綁定 tar 　　e.target 是你當前點擊的元素 e.currentTarget 是你綁定事件的元素 e.currentTarget.previousEle

浮動元素繼承父元素的padding-top值

疑問： ie6下浮動元素會繼承父元素的padding-top值？問題重現條件：子元素(a)浮動，父元素(.demo)設padding-top值並沒設高度，有祖父元素(.box) /*演示樣式*/ <style type="text/css">

今日總結vue 子元素觸發父元素事件 transition過度事件 axios安裝

<forgetMessage v-if="control.logoState == 2" @my-event="regression" ></forgetMessage> //父元素 methods 方法裡 regression (msg){ // 此事件用來觸發返回的

阻止子元素繼承父元素事件

DOM事件標準定義了兩種事件流，分別是捕獲和冒泡。預設情況下，事件使用冒泡事件流，不使用捕獲事件流。然而，在Firefox和Safari裡，你可以顯式的指定使用捕獲事件流，方法是在註冊事件時傳入useCapture引數，將這個引數設為true。冒泡事件流當事件在某一D

解決子元素浮動父元素高度為0

相關推薦