CSS知识点——高度塌陷BFC详解

阅读量：

文章结构概览

- 极度压缩
  - 应对极度压缩的处理方式：
  - BFC具体指什么？
  - - 触发BFC的条件
    - BFC的实际应用
    - - 利用BFC应对高度压缩问题
  - BFC处理边距值传递问题
  - BFC处理边距值累积问题

高度塌陷

在采用浮动布局时，若未对父级容器设定具体高度，其高度将由内部子元素的尺寸自动决定。然而，一旦子元素脱离当前文档流，父元素的高度将无法被正确计算，从而引发高度塌陷现象。以下为具体示例：

复制代码

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content{
            width: 1000px;
            background-color: bisque

全部评论 (0)

还没有任何评论哟~