HTML，css基础13

最新推荐文章于 2024-05-21 21:13:29 发布

止语c

最新推荐文章于 2024-05-21 21:13:29 发布

阅读量68

点赞数

分类专栏： HTML和CSS学习之路文章标签： css

本文链接：https://blog.csdn.net/weixin_53333752/article/details/128410843

版权

HTML和CSS学习之路专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!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>
</head>
<body>
    <!-- 高度塌陷
            高度塌陷是浮动布局中很常见的问题
            在浮动布局中，父元素的高度默认是被子元素撑开的
            当子元素浮动后会完全脱离文档流，会从文档流中脱离
            从而无法成其父元素的高度，导致父元素高度丢失
            父元素高度丢失之后，其下的元素会自动上移，导致页面布局混乱 -->

    <!-- BFC (Block formatting context) 块级格式化环境
            BFC是一个css中影藏的属性，为一个元素开启BFC之后该元素会变成一个独立的布局区域
            元素开启BFC后的特点：
                    不会被浮动元素所覆盖
                    子元素和父元素外边距不会重叠
                    可以包含浮动的子元素
            开启BFC的常见方式：
                    设置元素的浮动
                    将元素设置为行内块元素
                    将元素的overflow设置为非visible的值
                最常用的是为元素的overflow设置为hidden或anto 开启BFC，以使其可以包含浮动元素
    
    -->
    <!-- clear
            用来清除浮动元素对当前元素的影响
            可选值：
            left：清除左侧浮动元素对当前元素的影响
            right：清楚右侧浮动元素对当前元素的影响 
        原理：是浏览器自动为元素设置一个上外边距，使其位置不受其他元素的影响-->
</body>
</html>