瞭解清除和浮動

我正在學習CSS中的clear屬性。瞭解清除和浮動

我的理解是clear: both將移動元素，使其兩側的其他浮動元素不存在。但是，B在C的旁邊。這不是衝突嗎？

#A { 
 
    float: left; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
} 
 
#B { 
 
    float: right; 
 
    clear: both; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: green; 
 
} 
 
#C { 
 
    float: right; 
 
    height: 200px; 
 
    width: 500px; 
 
    background-color: blue; 
 
}

<!doctype html> 
 

 
<html lang="en"> 
 

 
<head> 
 
    <link rel="stylesheet" href="main.css"> 
 
</head> 
 

 
<body> 
 
    <div> 
 
    <h1>This is a main test statement</h1> 
 
    </div> 
 
    <div class="container"> 
 
    <div class="box1" id="A">A</div> 
 
    <div class="box2" id="B">B</div> 
 
    <div class="box3" id="C">C</div> 
 

 

 
    </div> 
 
</body> 
 

 
</html>

來源

2016-06-09 InQusitive

both是一個關鍵字，指示該元素向下移動以清除左右浮動。 https://developer.mozilla.org/en-US/docs/Web/CSS/clear – mlegg

@ j08691：那麼現在我需要使用C上的clear屬性將它從B移開呢？ – InQusitive

是的，如果你想在C之後（在B之後），那麼是的 – j08691

clear適用於DOM中之前出現的元素，所以它做什麼它應該做的事。 B是明確A.每the spec約clear

「這個屬性表示元素的盒子（ES）的側面可以不相鄰較早的浮箱。‘清除’屬性不考慮花車內部元素本身或其他塊格式上下文。「

來源

2016-06-09 18:48:19 j08691

瞭解清除和浮動

回答

相關問題