zoukankan      html  css  js  c++  java
  • css中:overflow:hidden清除浮动的原理

    要想彻底清除浮动的影响,适合的属性不是 clear 而是 overflow。

    一般使用 overflow:hidden,利用 BFC 的“结界”特性彻底解决浮动对外部或兄弟元素的影响。

    1. 前言:

    我们都知道overflow:hidden的字面意思是超出隐藏,说到这个超出隐藏就跟父元素的高度有关了,高度一定了的时候,超出隐藏才有依据。

    我们知道当子元素开始浮动了,会脱离文档流,其父元素的高度就会变为0,这个时候页面其他元素就会向上占据位置,就会导致页面混乱。

    这个时候我们在父元素设置overflow:hidden,就解决了页面混乱的问题。

    2. overflow:hidden作用机制BFC:

    定义:BFC(Block Formatting Context)全称是块级格式化上下文,用于对块级元素排版,默认情况下只有根元素(body)一个块级上下文,但是如果一个块级元素设置了float:left,overflow:hidden或position:absolute样式,就会为这个块级元素生产一个独立的块级上下文,使这个块级元素内部的排版完全独立。

    作用:独立的块级上下文可以包裹浮动流,全部浮动子元素也不会引起容器高度塌陷,就是说包含块会把浮动元素的高度也计算在内,所以就不用清除浮动来撑起包含块的高度。

    那什么时候会触发 BFC 呢?常见的情况如下: 

    • <html>根元素;

    • float的值不为none;

    • overflow的值为auto、scroll或hidden;

    • display的值为table-cell、table-caption和inline-block中的任何一个;

    • position的值不为relative和static。

    (以上主要是对张鑫旭老师的《css世界》以及其他作者的观点的做的知识梳理)

  • 相关阅读:
    Go 指针
    Go 字符串
    Go Maps
    Go 可变参数函数
    Go 数组和切片
    pyqt5实现窗口跳转并关闭上一个窗口
    spy++查找窗口句柄
    Python中Tk模块简单窗口设计
    pyqt5无边框拖动
    pyqt5 GUI教程
  • 原文地址:https://www.cnblogs.com/ympjsc/p/11800472.html
Copyright © 2011-2022 走看看