zoukankan      html  css  js  c++  java
  • float高度塌陷问题解决方案

    第一种方案 BFC(Block Formatting Context)

      块级格式化环境/布局环境

      BFC是CSS中的一个隐含属性,开启BFC该元素会变成一个独立的布局区域

      元素开启BFC的特点:

      1.开启BFC元素不会被浮动元素覆盖

      2.开启BFC元素子元素和父元素外边距不会重叠  

      3.开启BFC的元素可以包含浮动子元素

      开启BFC的方式:

      1.设置元素的浮动(不推荐)

      2.将元素设置为行内块元素(不推荐)

      3.将元素的overflow设置为一个非visible的值(副作用较小)

        常用方式为overflow:hidden/auto;

    第二种方式:

      clear属性作用:消除浮动元素对当前元素所产生的影响。

      可选值:left: 消除左侧浮动元素对当前元素的影响

          right:消除右侧浮动元素对当前元素的影响

          both: 消除两侧中最大影响的那侧

      示例

      .box1::after {

      content:"“;

      display:block;

      clear:both;

    }

  • 相关阅读:
    Rust语言学习笔记(11)
    Rust语言学习笔记(10)
    Rust语言学习笔记(9)
    Rust语言学习笔记(8)
    趣味编程:静夜思(Rust版)
    Python sorted()
    Python 魔法方法
    Python filter()
    Python的map和reduce
    Python函数的参数
  • 原文地址:https://www.cnblogs.com/kukai/p/12263195.html
Copyright © 2011-2022 走看看