了解清除和浮动

我正在学习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

了解清除和浮动

回答

相关问题