26、高度塌陷和BFC

最新推荐文章于 2022-10-28 22:49:22 发布

原创最新推荐文章于 2022-10-28 22:49:22 发布 · 239 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3

css 专栏收录该内容

50 篇文章

订阅专栏

文章目录

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

介绍

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

高度塌陷和BFC

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
 .outer{
     boder:10px red solid；
   
    2、BFC(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>