跳到主要内容

包含内部浮动

2023年02月28日
柏拉文
越努力，越幸运

包含内部浮动是为了清除浮动,撑起父元素,让浮动内容和周围的内容等高。

一、形成​

实时编辑器
function Test(props) {
  
  const container = {
    backgroundColor: "red"
  }
  const left = {
    width: "100px",
    height: "100px",
    float: "left",
    backgroundColor: "yellow"
  }
  const right = {
    width: "100px",
    height: "100px",
    float: "left",
    backgroundColor: "blue"
  }

  return (
     <div style={ container }>
       <div style={ left }></div>
       <div style={ right }></div>
     </div>
  );
}
结果
Loading...

由上述背景可知: 浮动元素脱离了文档流，所以子元素无法撑起父元素，造成的父元素高度塌陷问题

二、解决​

2.1 父元素添加overflow: hidden​

解决思路: 设置父元素 overflow: auto 或者其它除默认的 overflow: visible 以外的值。此时，父元素创建创建新的BFC, 任何子元素都会被包含进去，包括浮动元素。

实时编辑器
function Test(props) {
  
  const container = {
    backgroundColor: "red",
    overflow: "auto"
  }
  const left = {
    width: "100px",
    height: "100px",
    float: "left",
    backgroundColor: "yellow"
  }
  const right = {
    width: "100px",
    height: "100px",
    float: "left",
    backgroundColor: "blue"
  }

  return (
     <div style={ container }>
       <div style={ left }></div>
       <div style={ right }></div>
     </div>
  );
}
结果
Loading...

有上述解决可知: 使用 overflow 创建了新的 BFC, overflow 属性会告诉浏览器应该怎样处理溢出的内容, 所以会将浮动元素包含进去。

2.2 父元素添加display: flow-root​

解决思路: display: flow-root 是一个新的属性值, 可以创建无副作用的BFC。给父元素设置display: flow-root 之后, 父元素所有的内容都会参与BFC, 并且浮动的内容也不会底部溢出。

实时编辑器
function Test(props) {
  
  const container = {
    backgroundColor: "red",
    display: "flow-root"
  }
  const left = {
    width: "100px",
    height: "100px",
    float: "left",
    backgroundColor: "yellow"
  }
  const right = {
    width: "100px",
    height: "100px",
    float: "left",
    backgroundColor: "blue"
  }

  return (
     <div style={ container }>
       <div style={ left }></div>
       <div style={ right }></div>
     </div>
  );
}
结果
Loading...