为什么box2设置清除左浮动后box3也跟着box2下来了？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    html,body{
    margin: 0;
}
div{
    height: 200px;
    width: 200px;
    border:2px solid red;
    margin: 4px;
    float: left;
}
#box2{
     clear: left;
 }</style>
</head>
<body>
    <div id="box1">第一个盒子</div>
    <div id="box2">第二个盒子</div>
    <div id="box3">第三个盒子</div>
</body>
</html>
还有就是如果box2设置清除右浮动为什么三个盒子会依然显示在一行？

高为砚

浏览 1058回答 1

1回答

甜玉米和咸玉米

因为清除浮动是针对自身之前的元素，给box2设置了清除左浮动实际上就是清除了box1的浮动带来的副作用，那么box2及其后面的元素都会换行。同样的道理，box2清除右浮动，然而box2前面的元素并没有右浮动，当然3个盒子还是会显示在一行里啦。

随时随地看视频慕课网APP