26、高度塌陷和BFC

文章目录

  • 介绍
  • 高度塌陷和BFC
  • 开启BFC示例

介绍

本文是在学习CSS时做的学习笔记,所有笔记内容为 CSS学习笔记

高度塌陷和BFC

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
 .outer{
     boder:10px red solid;
   
    2BFC(Block Formatting Context) 块级格式化环境
         - BFC 是css中的一个隐含属性,可以为一个元素开启BFC
           开启BFC该元素会变成一个独立的布局区域,和其它块不同
         - 元素开启BFC的特点
            1、开启BFC的元素,不会被浮动元素覆盖  
            2、开启BFC的元素,子元素和父元素的外边距不会重叠
            3、开启BFC的元素,可以包含浮动的子元素,不会高度塌陷
            
         可以通过特殊方式,开启元素BFC
           1、设置元素浮动 (不推荐,会从文档流脱离)  
               float:left;
           2、将元素设置为行内块元素(不推荐)
               display:inline-block
           3、将元素的overflow设置为非visible的值
               常用方式:
                  overflow:hidden 开启BFC 

     float:left;
 }
 .inner{
     width:100px;
     height:400px;
     background-color:#bfs;
  
  1、高度塌陷问题
     在浮动布局中,父元素的高度默认是被子元素撑开的(如果不写死父元素高度)
       当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离
       将会无法称其父元素的高度,导致父元素的高度丢失
         
       父元素高度丢失以后,其下的元素会自动上移,导致页面布局混乱
       所以高度塌陷是浮动布局中比较常见的问题,这个问题必须处理

 
     float:left;
 }
</style>
<body>
<div class="outer">
  <div class="inner"></div>
</div>
<div style="width:100px;height:100px;background-color:yellow"></div>
</body>
</html>

开启BFC示例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
.box1{
    width:200px;
    height:200px;
    background-color:#bfa;
    // box1浮动时,对box2开启BFC,box2不会被盖住
     float:Left;
    
    // box1开启BFC,box3的外边距不会和box1的重叠
    overflow:hidden
}

<-- 
  设置overflow:hidden 属性后开启BFC
    box2不会被box1盖住
-->
.box2{
    width:200px;
    height:200px;
    background-color:orange;
    overflow:hiddden 
}
.box3{
    width:100px;
    height:100px;
    background-color:yellow;
    margin-toop:100px;
    
}


</style>
<body>
<div class="box1">
  <div class="box3"></div>
 
</div>
<div class="box2"></div>
</body>
</html>

你可能感兴趣的:(css)