疑问：clear清除浮动的影响

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

   <head>
      <title>清除浮动</title>
      <meta charset="UTF-8">
      <meta name="renderer" content="webkit">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <style type="text/css">
         body
         {font: 30px "微软雅黑";}

         #container
         {
             width: 500px;
             border: 2px solid #000;
         }

         #div1,
         #div2,
         #div3
         {
             width: 100px;
             height: 100px;
             line-height: 100px;
             text-align: center;
             color: #FFF;
         }

         #div1
         {
             background-color: blue;
             float: right;
         }
            
         #div2
         {
             background-color: red;
             float: right;
         }

         #div3
         {
             background-color: orange;
             float: right;
         }

         #div1,
         #div2,
         #div3
         {
             clear: both;
         }
     </style>
   </head>

   <body>
        <div id="container">
            <div id="div1">div 1</div>
            <div id="div2">div 2</div>
            <div id="div3">div 3</div>
        </div>
   </body>

</html>

以上代码的效果如下图所示：

可以看出，3个子元素设置了clear:both;之后，父元素高度依然是坍塌的，并没有由3个div的高度撑开。

那是不是理解为：

clear清除的不是浮动，清除的是浮动的影响。清除浮动的影响后，3个div回归正常文档流，依次从上到下排列。但是，既然回归正常文档流，父元素的高度怎么还是坍塌的呢？不应该由3个div撑开吗？3个div为什么依然紧靠右侧呢？不应该紧靠左侧吗？

这清除效果跟预想的不一样啊？

我学习太差被关起来了 2019-06-08

源自：float浮动 2-10 清除浮动语法

收起

1回答

樱桃小胖子 2019-06-09 16:18:54

1、先来看一个例子：

2、由上面的例子得出：div1设置了clear:both是清除了div1前面的浮动元素对自身的影响（当然，这里div1前面没有设置浮动的元素，这里只是推理过程需要），div2设置了clear:both清除的是前面div1对div2的影响，那么div3设置了clear:both清除的是div2对div3的影响，但是div3本身也设置了float，所以会导致高度塌陷。解决办法：

希望可以帮到你！

收起回答

提问者我学习太差被关起来了 #1

设置了clear的元素，清除的是前面浮动元素对该元素的影响，也就是前面的浮动元素不会对该元素造成影响，即该元素还是排列在前面浮动元素之后，并不会往上挤。回复中发不了格式代码，只好粘贴了。 <style type="text/css"> body {font: 30px "微软雅黑";} #container { width: 500px; border: 2px solid #000; } #div1, #div2, #div3, #div4, #div5 { width: 100px; height: 100px; line-height: 100px; text-align: center; color: #FFF; } #div1 { background-color: blue; float: left; } #div2 { background-color: red; float: left; clear: both; } #div3 { background-color: orange; float: right; clear: left; } #div4 { background-color: green; float: right; clear: right; } #div5 { background-color: pink; clear: left; } </style> <div id="container"> <div id="div1">div 1</div> <div id="div2">div 2</div> <div id="div3">div 3</div> <div id="div4">div 4</div> <div id="div5">div 5</div> </div> </body>

2019-06-09 18:00:13
樱桃小胖子回复提问者我学习太差被关起来了 #2

优秀，是这个意思！

2019-06-09 18:05:53