CSS布局2

结构伪类选择器

 

 

 

 

 

 

 

 

 

 

◆ 伪元素

 

 

 

 

 

 

 

◆ 浮动

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

◆ 清除浮动

 清除浮动

　　1.去除高度

　　2.额外标签法：给添加的块级元素设置 clear:both

　　 缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

 

 

 

 

 

 

 　　3.单伪元素清楚法

 

 注意：工作中常用

 /* 单伪元素清除浮动 和 额外标签法原理是一样的 */

        .clearfix::after {

            content: '';

            /* 伪元素添加的标签是行内, 要求块 */

            display: block;

            clear: both;

            /* 为了兼容性 */

            height: 0;

            visibility: hidden;

        }

 

 

 <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->

    <div class="top clearfix">

        <div class="left"></div>

        <div class="right"></div>

        <!-- 通过css 添加标签 -->

    </div>

    <div class="bottom"></div>

 

 

4. 双伪元素清除法

 

 

  /*  .clearfix::before 作用: 解决外边距塌陷问题

            外边距塌陷: 父子标签, 都是块级, 子级加margin会影响父级的位置

        */

        /* 清除浮动 */

        .clearfix::before,

        .clearfix::after {

            content: '';

            display: table;

        }

        /* 真正清除浮动的标签 */

        .clearfix::after {

            /* content: '';

            display: table; */

            clear: both;

        }

 

<!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->

    <div class="top clearfix">

        <div class="left"></div>

        <div class="right"></div>

    </div>

    <div class="bottom"></div>

 

5. 给父元素设置overflow : hidden   最方便