zoukankan      html  css  js  c++  java
  • 清除浮动的方式

    为什么要清除浮动

    浮动元素脱离了标准文档区域,位于其他元素上方,导致代码中浮动元素后面的其他元素会隐藏在浮动元素后面,网页显示错乱


     

    一、给父元素设置固定高度

    缺点:使用不灵活,后期不易维护

    应用:网页中盒子固定高度区域,比如固定的导航栏

    二、内墙法(了解)

    使用规则:在最后一个浮动元素的后面加一个空的块级元素,并且设置该属性clear:both;

    缺点:结构冗余

    三、伪元素(选择器)清除

    语法:定义类名:clearfix

    类名+两个冒号+after

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

    四、 overflow:hidden;

    在父元素添加属性 overflow:hidden; 形成BFC区域

    BFC区域有这样一条规则:计算BFC区域(块级盒子)的高度时,浮动元素也参与计算

    形成BFC的条件:除了overflow:visitable(继承属性)这个属性外,overflow的其他属性都可以形成BFC区域

     


     补充:

    哪些元素会生成BFC

    1、根元素

    2、float属性不为none

    3、position属性为absolute或fixed

    4、display属性为inline-block

    5、overflow属性不为visible

     

  • 相关阅读:
    SSM:Spring整合SpringMVC框架
    SSM:搭建整合环境
    SpringMVC:常用注解
    SpringMVC的入门案例
    base64
    windows设置exe开机自启动
    Python-wmi模块
    Base64String转为图片并保存
    java给图片添加水印图片
    uni-app中封装axios请求
  • 原文地址:https://www.cnblogs.com/nanjo4373977/p/12410366.html
Copyright © 2011-2022 走看看