CSS(五)——浮动问题2. 当对左侧三个元素进行一个左浮动时：

当没有对元素进行浮动时

 <style>
        .wrapper{
            height: 200px;
            width: 200px;
        }
        #wrapper1{
            background: pink;
        }
        #wrapper2{
            background: aqua;
        }
        #wrapper3{
            background: palegreen;
        }
        #parent{
            background: lightcyan;
        }
    </style>
</head>
<body>
    <div id="parent" class="clearfix">
        <div class="wrapper" id="wrapper1">div1</div>
        <div class="wrapper" id="wrapper2">div2</div>
        <div class="wrapper" id="wrapper3">div3</div>
    </div>
</body>

效果如下：

2. 当对左侧三个元素进行一个左浮动时：

注意：元素浮动以后，元素的空间会被释放

.wrapper{
            height: 200px;
            width: 200px;
            float:left;  
        }

由上图所示，不难发现父元素的背景颜色消失了，这就产生了一个经典问题——父元素塌陷问题

产生父元素塌陷问题的解决办法：

给父元素设置高度

 #parent{
            height: 200px; 
            background: lightcyan;
        }

效果：

给父元素设置溢出隐藏

#parent{
    overflow: hidden; 
    background:  lightcyan;
    }

在父元素里的最后面加入一个空的块级子元素，并且给这个元素清除两侧浮动 clear：both；

<style>
    .child{
          clear: both;
          }
</style>
      
<div id="parent" class="clearfix">
    <div class="wrapper" id="wrapper1">div1</div>
    <div class="wrapper" id="wrapper2">div2</div>
    <div class="wrapper" id="wrapper3">div3</div>
    <div class="child"></div>
</div>

利用伪元素进行清除浮动（强力推荐使用）

伪元素优先级别和标签选择器优先级一样都是1

<style>
     .clearfix::after{
          content: "";
          display: block;
          clear: both;
        } 
</style>
<div id="parent" class="clearfix">
    <div class="wrapper" id="wrapper1">div1</div>
    <div class="wrapper" id="wrapper2">div2</div>
    <div class="wrapper" id="wrapper3">div3</div>
  </div>

CSS(五)——浮动问题

注 意：元素浮动以后，元素的空间会被释放

由上图所示，不难发现父元素的背景颜色消失了，这就产生了一个经典问题——父元素塌陷问题

伪元素优先级别和标签选择器优先级一样都是1

注意：元素浮动以后，元素的空间会被释放