解决浮动带来影响的方法

寻技术 Html/CSS 2023年12月02日 67

# 浮动会带来的影响

—— 会造成父标签塌陷的问题

 

解决办法:

方法一:自己加一个div,设置高度

 

方法二:利用clear属性

#d1{
     clear: left;  /*该标签的左边(地面和空中)都不能有浮动的元素*/
   }

 

方法三:使用通用方法

  在写HTML代码前,先提前写好处理浮动带来的影响的css代码:

.clearfix:after {
            content: ''; /*定义内容为空*/
            display: block;  /*将属性设置为块儿属性(独占一行)*/
            clear: both;
        }

<div id="d1" class="clearfix">

</div>

  之后只要标签出现了塌陷的问题,就给该塌陷的标签加一个clearfix属性即可

  上述的解决方式是通用的,到哪都一样,并且名字就叫clearfix

关闭

用微信“扫一扫”