修復清除浮動破損

我遇到問題的方法可以解決由after選擇器具有清除浮動規則打破預期佈局的元素引起的問題。請參閱this fiddle。我決定在SO上發帖，因爲我無法找到解決此問題的方法clean。修復清除浮動破損

看上面的小提琴，預期的結果是藍色區域高達完全包含其子節點，但不是任何更高。正如你所看到的，這不是發生了什麼，而是藍色區域與黃色區域的高度相匹配。那原因是，我相信，雙重的：

藍色和紅色區域的包裝（.outer）是不浮動並採用保證金招正確地調整自身，而黃色區域（ .sidebar）是向左漂浮。
藍色元件（.toolbar）具有含有clear: float規則以某種方式重新參照.sidebar的浮子的after選擇器（雖然爲什麼？）。

那麼，我該如何解決這個乾淨的方式，使藍色區域有預期的高度？

順便說一句，這裏是一個「修復」，我想出了這我麻煩接受，因爲它非常感覺哈克： fiddle。技巧包括浮動藍色和紅色元素的內部包裝（ .inner）。

來源

2016-02-20 miguelg

你只需要申請'浮動：（'.toolbar'） – kanudo

您可以修改塊的格式化上下文，因此浮動的元素將被引導。

溢出，顯示浮動和位置可以做到這一點，具有溢出代碼：

.wrapper { 
 
} 
 
.sidebar { 
 
    width: 200px; 
 
    background-color: yellow; 
 
    height: 300px; 
 
    float: left; 
 
} 
 
.outer, .toolbar { 
 
    overflow:hidden; 
 
} 
 
.toolbar { 
 
    background-color: blue; 
 
} 
 
.group { 
 
    float: right; 
 
} 
 
.content { 
 
    height: 800px; 
 
    background-color: red; 
 
}

<body> 
 
    <div class="wrapper"> 
 
    <div class="sidebar"> 
 
     sidebar 
 
    </div> 
 
    <div class="outer"> 
 
     <div class="inner"> 
 
     <div class="toolbar"> 
 
      <div class="group"> 
 
      <button> 
 
       Test 
 
      </button> 
 
      </div> 
 
     </div> 
 
     <div class="content"> 
 
      <div> 
 
      TEST 
 
      </div> 
 
      Lorem ipsum 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

更多信息請參閱：https://css-tricks.com/all-about-floats/

來源

2016-02-20 12:06:03

非常好，謝謝！ – miguelg

修復清除浮動破損

回答

相關問題