css 清除float的方法
阿新 • • 發佈：2017-12-19
charset div 原來 alt round 都是 在底部 坍塌 red
首先我們要理解這個flaot 為什麽要清除,作為小白來說直接顛覆了我之前學的內容,因為之前學的東西雖然碰到float後,脫離文檔流後給兄弟元素或者父元素造成影響,但是都是通過option來定位 要麽絕對 要麽相對 ,都是能解決的.
這個概念才理解的時候,我都想為什麽要清除,我都設置了還要清除幹嘛?
後來知道 這個清除float 並不是把自身浮動清除,而是相對與前後兄弟標簽來說的,也可能相對父級標簽;
下面來解釋一下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.div1{
width: 90px;
height: 90px;
background-color: steelblue;
border: 1px red solid;
}
</style>
<body>
<div style="background-color: gold; border: 1px solid red;">
<div class="div1">標簽1</div>
<div class="div1">標簽2</div>
<div class="div1">標簽3</div>
<div class="div1">標簽4</div>
<!--<div style="clear: both; "></div>-->
</div>
</body>
</html>
因為DIV是塊級標簽很DIAO的,全部自成一行,如果想在標簽一後後面直接跟上div1就要加入float:left;
結果出現的情況是因為原來的父級DIV標簽沒有設置高度導致高度坍塌,全部脫離文檔流後沒有東西能撐起高度.原來的邊框也就是一條線了!
就是在底部加入了行標簽 ,關鍵是裏面的CSS,clear:both;
他會清除裏面所有的兄弟標簽的float:left的屬性,父級標簽也撐起來了,所有的標簽1 2 3 4都按左依次排列. 這個方法即讓元素按設定浮動,又沒有損害父類的高度.可以隨著內部標簽的增加,父級標簽自動的填滿背景,不坍塌.結果如下:
還有另外一種方法:
css 清除float的方法