高度塌陷问题

分手后的思念是犯贱 2021-11-17 17:44 276阅读 0赞

1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title></title>
     6         <script type="text/javascript">
     7             
     8         </script>
     9         
    10     <style type="text/css">
    11     .box1{
         
    12         /*
    13         没有设置宽高，则宽继承父元素，高由内容决定
    14         */
    15         border: 10px red solid;
    16     }
    17     .box2{
         
    18         width: 100px;
    19         height: 100px;
    20         background-color: blue;
    21         /*
    22         在文档流中，父元素的高度默认是子元素撑开的
    23         也就是子元素多高，父元素多高
    24         
    25         为子元素设置向左浮动
    26         但是当为子元素设置浮动以后，子元素会完全脱离文档流
    27         此时会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷
    28         由于父元素的高度塌陷，则父元素下所有元素都会向上移动，这样导致页面布局混乱
    29         所以在开发中要避免出现高度塌陷
    30         
    31         可以将父元素的高度写死，以避免塌陷问题，但是父元素的高度将不能自动适应子元素的高度
    32         所以这种方案是不推荐的
    33         */
    34        float: left;
    35     }
    36     </style>
    37        
    38     </head>
    39     <body>
    40      <div class="box1">
    41          <div class="box2"></div>
    42      </div>
    43     </body>
    44 </html>

转载于:https://www.cnblogs.com/zuiaimiusi/p/11209734.html

发表评论取消回复

表情：

评论列表（有 0 条评论，276人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML高度塌陷

描述父div靠子div撑开，子div全部设置浮动，父div因没有高度而出现塌陷的情况解决 1. 父div设置overflow: hidden 2. cl...

傷城~/ 2024年04月18日 19:56/ 0 赞/ 57 阅读

相关高度自适应和高度塌陷

高度自适应的情况： 1. 高度不去设置，或者高度设置auto 内容撑开父元素的高度。 2. 内容撑开父元素的高度 -> 最小高度的设置 min-height 3. 浮动

灰太狼/ 2023年07月20日 08:22/ 0 赞/ 14 阅读

相关 css 高度塌陷_CSS中的浮动、高度塌陷以及清除浮动

一、CSS浮动浮动(float)的框可以左右移动，直至它的外边缘碰到包含框或另一个浮动框的外边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级元素的布局而

迈不过友情╰/ 2023年01月01日 01:41/ 0 赞/ 213 阅读

相关 HTML 解决父DIV高度塌陷问题

给父元素增加overflow样式, > overflow:auto; 或者 > > overflow:hidden ; 或者

向右看齐/ 2022年09月08日 03:57/ 0 赞/ 170 阅读

相关使用clear,after完美解决高度塌陷

clear：清除浮动对下一个元素的布局影响上面开启BFC的第一种方法可能会对下一个元素的布局产生影响，针对这种影响，我们可以设置下一个元素的clear属性，可选值：

淩亂°似流年/ 2022年08月29日 05:59/ 0 赞/ 132 阅读

相关浮动高度塌陷的BFC解决办法

什么是高度塌陷？当需求包含父元素高度随子元素变化而变化，即要求浮动的子元素始终得被父元素所包围，但是由于子元素浮动脱离文档流，会出现父元素高度丢失的情况，并且还会影响下

╰半夏微凉°/ 2022年08月29日 05:57/ 0 赞/ 194 阅读

相关解决网页元素的容器塌陷问题（div高度变为0）

当我们对div或者其他容器内部的标签使用float属性后，会出现此div下面的其他网页元素跑到此div的顶栏位置，这是由于使用了float使其父级容器出现了容器塌陷（检查元

布满荆棘的人生/ 2022年05月30日 07:36/ 0 赞/ 401 阅读

相关前端基础问题 -- 高度塌陷问题详解(面试重点问题)

高度塌陷：父元素的高度，默认被子元素撑开，目前来讲son多高，father就多高。此时如果子元素设置浮动，则会导致其完全脱离文档流，子元素脱离文档流将无法撑开父元素，导致父

╰半橙微兮°/ 2022年05月10日 01:10/ 0 赞/ 365 阅读

相关高度塌陷问题

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-

分手后的思念是犯贱/ 2021年11月17日 17:44/ 0 赞/ 277 阅读

相关 CSS-清除浮动（高度塌陷）

CSS三大特性：层叠性、继承性、优先级层叠性：样式冲突，就近原则，如不冲突，不会层叠复合选择器会有权重叠加的问题 table——属性：cellspacing、ce

水深无声/ 2021年11月09日 23:36/ 0 赞/ 318 阅读