css 去除浮动

用户4477354781994
140 阅读2分钟

浮动产生的问题

//当子元素设置为浮动且父元素未设置高度时，父级元素高度会塌陷;
<html>
  <div class="head">
    <div class="content1">
    </div>
    <div class="content2">
    </div>
    <!-- <div class="empty"></div> -->
  </div>
  <div class="footer"></div>
  <style>
    .head{
      border: 1px solid #345;
    }
    .content1,.content2{
      width: 100px;
      height: 30px;
      background-color: aqua;
      float: left;
    }
    .footer{
      width: 300px;
      height: 20px;
      background-color: brown;
    }
  </style>
</html>

image.png

解决方案

1.子元素后面加空标签，设置clear：both;


  <div class="head">
    <div class="content1">
    </div>
    <div class="content2">
    </div>
    <div class="empty"></div>
  </div>
  <div class="footer"></div>
  

/* 方法一：添加空标签 设置clear:both*/
<style>
.empty{
 content: '';
 clear: both;
}
</style>

image.png

2.设置父元素overflow为hidd 或 scroll

  <style>
  .head{
  overflow:hidden | scroll;// 设置为scroll的时候会出现滚动条
  }
  </style>

3.父元素添加伪元素，伪元素设置clear：both

<style>
.head:after{
    disply:block;
    clear:both;
 }
</style>

BFC

定义

BFC 是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发 BFC 的条件，则 BFC 中的元素布局不受外部影响。
他指定了一块环境，在这块环境内部的元素布局与外界不产生相互影响。
BFC的渲染规则：
内部盒子垂直排列，自上而下，间距由margin决定（也就是说在BFC中上下相邻的两个容器的margin会重叠）
计算BFC的高度时，需要计算浮动元素的高度
BFC的区域不会与浮动的区域重叠
BFC 是独立的容器，容器内部元素不会影响外部元素

如何实现

创建 BFC 的条件：
根元素：body；
元素设置浮动：float 除 none 以外的值；
元素设置绝对定位：position (absolute、fixed)；
display 值为：inline-block、table-cell、table-caption、flex 等；
overflow 值为：hidden、auto、scroll；（即不为visible）

用处

解决高度塌陷的问题：
在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为 0。解决这个问题，只需要把父元素变成一个 BFC。
利用BFC清除浮动
/**通过设置位置position可以解决高度塌陷,但父级元素的会变为行内元素**/
给父元素添加 overflow:hidden 或 overflow:auto

image.png

avatar
文章
阅读
粉丝