css12.高度塌陷问题

最新推荐文章于 2023-03-06 19:10:09 发布

时光无错孤独难谈

最新推荐文章于 2023-03-06 19:10:09 发布

阅读量87

点赞数

分类专栏： html5 && css

本文链接：https://blog.csdn.net/qq_43745403/article/details/104311626

版权

html5 && css 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <style type="text/css">
            .box1{
                /* 为box1指定边框 */
                border: 10px red solid;
                /* 
                    开启BFC以后，有以下特性
                        1.父元素的垂直外边距不会和子元素重叠
                        2.开启BFC的元素不会被浮动元素覆盖
                        3.开启BFC的元素可以包含浮动的子元素
                    开启方法:
                        1.设置元素浮动   //float: left;
                            -使用此方法开启，会撑开父元素，但是会导致父元素宽度丢失
                                而且使用这种方法会导致下边元素上移
                        2.设置元素绝对位置   
                        3.设置元素为inline-block        //display:inline-block;
                            -使用此方法开启，会撑开父元素，但是会导致父元素宽度丢失
                        4.将元素的overflow设置为一个非visible

                        推荐方式:将overflow设置为hidden（auto)是副作用最小的方式
                */
                /* 解决高度塌陷的方法 */
                overflow: hidden;

                /* IE6一下 */
                /* zoom:1; */
            }

            .box2{
                width: 100px;
                height: 100px;
                background-color: pink;
                /* 
                    在文档流中，父元素高度默认被子元素撑开
                    也就是子元素多高，父元素多高
                    但是当子元素设置浮动之后，子元素会完全脱离文档流，导致父元素高度塌陷
                    由于父元素高度塌陷，父元素下面元素上移，造成页面混乱
                */
                float: left;
            }
            .box3{
                height: 100px;
                background-color: rosybrown;
}
        
        </style>


    </head>
        
    <body>
        <div class="box1">
            <div class="box2"></div>
        </div>

        <div class="box3"></div>
    </body>


</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <style type="text/css">
            .box1{
                width: 100px;
                height: 100px;
                background-color: teal;
                float: left;
            }
            .box2{
                width: 200px;
                height: 200px;
                background-color: skyblue;
                /* 
                    我们希望清掉box1浮动造成的影响，我们用clear来清除浮动
                    clear可以用来清除其他浮动元素对当前元素的影响
                    可选值：
                        none：无操作
                        left:清除左侧浮动元素对当前元素影响
                        right:清除右侧浮动元素对当前元素影响
                        both:清除两侧浮动元素对当前元素影响
                                其实是清除对他影响最大元素
                    清除浮动，box2位置不变

                */
                float: right;
            }
            .box3{
                width: 300px;
                height: 300px;
                background-color: aqua;
                clear: both;
            }
            /* 
                解决高度塌陷方案二
                    可以直接在高度塌陷父元素最后，添加一个空白div
                    由于这个div没有浮动，所以它可以撑开父元素的高度
                    然后对他清除浮动，通过这个空白div清除浮动
             */
             /* https://www.bilibili.com/video/av21557880?p=64 */

             /* .box1:after{
                 content: "hello";
             } */
        </style>


    </head>
        
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </body>


</html>

时光无错孤独难谈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css12.高度塌陷问题

<!DOCTYPE html><html> <head> <meta charset="UTF-8"/> <style type="text/css"> .box1{ /* 为box1指定边框 */ borde...
复制链接

扫一扫