liaooo

标签： 浮动

  • 清除浮动

    如果子元素浮动了，此时子元素不能撑开父元素。
    目的：需要父元素有高度，从而不影响其他网页元素的布局

    1.直接设置父元素高度

    • 优点:简单粗暴，方便
    • 缺点:有些布局中不能固定父元素高度。如:新闻列表、京东推荐模块

    2.额外标签法

    方法：

    • 在父元素内容最后添加一个块级元素
    • 给添加的块级元素设置 clear:both

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

    3.单伪元素清除法

    基本写法：

     .clearfix::after{
     ​
     content:'';
     ​
     display:block
     ​
     clear:both
     ​
     }

    补充写法：

     .clearfix::after{
     ​
     content:'';
     ​
     clear:both
     ​
     /*  补充代码：在网页中看不到伪元素  */
     ​
     height:0;
     ​
     visibility:hidden;
     ​
     }

    优点:项目中使用，直接给标签加类即可清除浮动

    4.双伪元素清除法

     .clearfix::before,
     ​
     .clearfix::after{
     ​
     content:'';
     ​
     display:table;
     ​
     }
     ​
     .clearfix::after{
     ​
     clear:both;
     ​
     }

    优点：项目中使用，直接给标签加类即可清除浮动

    5.给父元素设置overflow : hidden

    (拓展补充)

    BFC的介绍

    ➢ 块格式化上下文(Block Formatting Context):BFC

    是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

    ➢ 创建BFC方法:

    1. html标签是BFC盒子
    2. 浮动元素是BFC盒子
    3. 行内块元素是BFC盒子
    4. overflow属性取值不为visible。如:auto、hidden…
    5. ……

    ➢ BFC盒子常见特点:

    1. BFC盒子会默认包裹住内部子元素(标准流、浮动)→ 应用:清除浮动
    2. BFC盒子本身与子元素之间不存在margin的塌陷现象 → 应用:解决margin的塌陷
    3. ……