css清除浮动的方法

不只是大师 2020年09月09日 156次浏览

1、添加新元素

<div class="parent">
  <div class="child"></div>
  <!-- 添加一个空元素,利用css提供的clear:both清除浮动 -->
  <div style="clear: both"></div>
</div>

2、使用伪元素

/* 对父元素添加伪元素 */
.parent::after{
  content: "";
  display: block;
  height: 0;
  clear:both;
}

3、触发父元素BFC

.parent {
  overflow: hidden;
  /* float: left; */
  /* position: absolute; */
  /* display: inline-block */
  /* 以上属性均可触发BFC */
}

BFC: 全称 Block Formatting Context 即块级格式上下文,简单的说,BFC是页面上的一个隔离的独立容器,不受外界干扰或干扰外界
触发BFC方式:
•float不为 none
•overflow的值不为 visible
•position 为 absolute 或 fixed
•display的值为 inline-block 或 table-cell 或 table-caption 或 grid

BFC渲染规则:
•清除浮动:BFC内部的浮动元素会参与高度计算,因此可用于清除浮动,防止高度塌陷
•避免某元素被浮动元素覆盖:BFC的区域不会与浮动元素的区域重叠
•阻止外边距重叠:属于同一个BFC的两个相邻Box的margin会发生折叠,不同BFC不会发生折叠

3、

   typeof null    --- object
   typeof NaN     --- Number
   typeof []      --- object
   typeof undefined --- undefined

4、keep-alive 实现的思想?钩子函数 activated deactivated
思想是对虚拟dom的存储