跳到主要内容

父子元素

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

没有内容将父元素和后代元素分开: 如果没有边框border，内边距padding，行内内容，也没有创建块级格式上下文或清除浮动来分开一个块级元素的上边界margin-top 与其内一个或多个后代块级元素的上边界margin-top；或没有边框，内边距，行内内容，高度height，最小高度min-height或 最大高度max-height 来分开一个块级元素的下边界margin-bottom与其内的一个或多个后代后代块元素的下边界margin-bottom，则就会出现父块元素和其内后代块元素外边界重叠，重叠部分最终会溢出到父级块元素外面。

一、形成​

实时编辑器
function Test(props) {
 const fatherSibling = {
    width: "200px",
    height: "200px",
    marginBottom: "40px",
    backgroundColor: "red",
 }
 const father = {
   width: "200px",
   height: "200px",
   backgroundColor: "black",
 }
 const son = {
    width: "100px",
    height: "100px",
    marginTop: "60px",
    backgroundColor: "blue",
 }
 

  return (
     <div>
         <div style={ fatherSibling }></div>
         <div style={ father }>
               <div style={ son }></div>
         </div>
     </div>
  );
}
结果
Loading...

如上所示: 给子元素son设置 margin-top,那么这个属性反而对父元素产生了同样的效果。

二、解决​

2.1 子元素添加float: left​

解决思路: 子元素通过float: left创建了BFC, BFC 不会与相邻元素重叠

实时编辑器
function Test(props) {
 const fatherSibling = {
    width: "200px",
    height: "200px",
    marginBottom: "40px",
    backgroundColor: "red",
 }
 const father = {
   width: "200px",
   height: "200px",
   backgroundColor: "black",
 }
 const son = {
    width: "100px",
    height: "100px",
    marginTop: "60px",
    backgroundColor: "blue",
    float: "left"
 }
 

  return (
     <div>
         <div style={ fatherSibling }></div>
         <div style={ father }>
               <div style={ son }></div>
         </div>
     </div>
  );
}
结果
Loading...

2.2 父元素添加overflow: hidden​

解决思路: 父元素通过overflow创建了BFC, BFC 不会与相邻元素重叠

实时编辑器
function Test(props) {
 const fatherSibling = {
    width: "200px",
    height: "200px",
    marginBottom: "40px",
    backgroundColor: "red",
 }
 const father = {
   width: "200px",
   height: "200px",
   backgroundColor: "black",
   overflow: "hidden"
 }
 const son = {
    width: "100px",
    height: "100px",
    marginTop: "60px",
    backgroundColor: "blue",
 }
 

  return (
     <div>
         <div style={ fatherSibling }></div>
         <div style={ father }>
               <div style={ son }></div>
         </div>
     </div>
  );
}
结果
Loading...

2.3 子元素添加position: absolute​

解决思路: 子元素通过position: absolute创建了BFC, BFC 不会与相邻元素重叠

实时编辑器
function Test(props) {
 const fatherSibling = {
    width: "200px",
    height: "200px",
    marginBottom: "40px",
    backgroundColor: "red",
 }
 const father = {
   width: "200px",
   height: "200px",
   backgroundColor: "black",
 }
 const son = {
    width: "100px",
    height: "100px",
    marginTop: "60px",
    backgroundColor: "blue",
    position: "absolute"
 }
 

  return (
     <div>
         <div style={ fatherSibling }></div>
         <div style={ father }>
               <div style={ son }></div>
         </div>
     </div>
  );
}
结果
Loading...

2.4 父元素添加 padding-top: 1px​

解决思路: 通过为父元素添加padding将块级父元素与块级子元素分隔开来。

实时编辑器
function Test(props) {
 const fatherSibling = {
    width: "200px",
    height: "200px",
    marginBottom: "40px",
    backgroundColor: "red",
 }
 const father = {
   width: "200px",
   height: "200px",
   backgroundColor: "black",
   paddingTop: "1px"
 }
 const son = {
    width: "100px",
    height: "100px",
    marginTop: "60px",
    backgroundColor: "blue",
 }
 

  return (
     <div>
         <div style={ fatherSibling }></div>
         <div style={ father }>
               <div style={ son }></div>
         </div>
     </div>
  );
}
结果
Loading...

2.5 子元素添加display: inline-block​

解决思路: 子元素通过display: inline-block创建了BFC, BFC 不会与相邻元素重叠

实时编辑器
function Test(props) {
 const fatherSibling = {
    width: "200px",
    height: "200px",
    marginBottom: "40px",
    backgroundColor: "red",
 }
 const father = {
   width: "200px",
   height: "200px",
   backgroundColor: "black",
 }
 const son = {
    width: "100px",
    height: "100px",
    marginTop: "60px",
    backgroundColor: "blue",
    display: "inline-block"
 }
 

  return (
     <div>
         <div style={ fatherSibling }></div>
         <div style={ father }>
               <div style={ son }></div>
         </div>
     </div>
  );
}
结果
Loading...

2.6 父元素添加border:1px solid transparent​

解决思路: 通过为父元素添加border将块级父元素与块级子元素分隔开来。

实时编辑器
function Test(props) {
 const fatherSibling = {
    width: "200px",
    height: "200px",
    marginBottom: "40px",
    backgroundColor: "red",
 }
 const father = {
   width: "200px",
   height: "200px",
   backgroundColor: "black",
   border: "1px solid transparent"
 }
 const son = {
    width: "100px",
    height: "100px",
    marginTop: "60px",
    backgroundColor: "blue",
 }
 

  return (
     <div>
         <div style={ fatherSibling }></div>
         <div style={ father }>
               <div style={ son }></div>
         </div>
     </div>
  );
}
结果
Loading...