高度塌陷问题（overflow与clear）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>高度塌陷</title>
    <style>
       .box1{
           border: 5px solid red;
           /*根据W3C的标准，在页面中元素都隐含的属性叫BFC
           * BFC,该属性可以设置打开和关闭，默认是关闭的
           * 当开启元素BFC以后，元素将会有以下的特性
           * 1.父元素的垂直外边距不会和子元素重叠
           * 2.开启BFC的元素不会被浮动元素所覆盖
           * 3.开启BFC的元素可以包含浮动的子元素
           *
           */
           /*
           *如何去开启元素的BFC
           * 1.设置元素的浮动
           *        -使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失
           *        -而且使用这种方式也会导致下边元素的上移，不能解决问题
           * 2.设置元素的绝对定位（2的效果同1）
           * 3.设置元素为inline-block（效果没有宽度）
           * 以上3中不推荐
           * 4.将元素的overflow设置为一个非visible
           */
           /*float:left;*/
           /*position: absolute;*/
           /*display: inline-block;*/
           /*overflow: hidden; */
           /*ie6以下的浏览器，并不支持BFC，而是使用haslayout
           * 该属性的作用和BFC类似，所以IE6浏览器可以通过haslayout来解决问题
           * display: inline-block
               height: (除 auto 外任何值)
               width: (除 auto 外任何值)
               float: (left 或 right)
               position: absolute
               writing-mode: tb-rl
               zoom: (除 normal 外任意值)
               作用最小的：
               zoom
           *
           *
           * */
           /*zoom表示放大的意思，后面跟著一個數值，写几就将元素放大几倍*/
           /*zoom:3;*/

       }
       .box2{
           width: 100px;
           height: 200px;
           background-color: #000000;
           float:left;

       }
       .box3{
           height: 100px;
           background: green;
       }
       /*
       *clear可以用来清除其他浮动元素对当前元素的影响
       *     可选值：   none
       *                left
       *                right
       *               both
       */
       .clearfix:after{
       /*添加一个内容*/
           content:"";
       /*转化为一个块元素*/
       display: block;
       /*清除两侧浮动*/
       clear: both;
       }
    </style>
</head>

<body>
   

    <div class="box1 clearfix">
        <div class="box2"></div>
    </div>
    <div class="box3"></div>
    <p>我是p段落</p>


</body>
</html>

高度塌陷问题（overflow与clear）

猜你喜欢