浮动&解决高度塌陷&清除浮动和解决高度塌陷最终方法

最新推荐文章于 2022-05-04 12:47:29 发布

逻辑鬼才不太聪明

最新推荐文章于 2022-05-04 12:47:29 发布

阅读量177

点赞数

分类专栏： HTML&CSS 文章标签： html css

本文链接：https://blog.csdn.net/qq_42919799/article/details/106003977

版权

HTML&CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

浮动&解决高度塌陷&清除浮动和解决高度塌陷最终方法

浮动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        /* 
        块元素在文档流中默认垂直排列
        可以使用 float 来使元素浮动，从而脱离文档流
        可选值：
            none 默认值，元素没人在文档流中排列
            left 元素会脱离文档流，向页面左侧浮动
            right 元素会向右侧浮动
        float：left；
        注意：
            1.当为一个元素设置浮动以后（float属性是一个非none的值）
            2.元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动
            3.元素浮动以后，会尽量向页面的左上或右上浮动
            4.知道遇到父元素的边框或者其他的浮动元素
            5.如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素
            6.浮动的元素不会超过他上边的兄弟元素，最多显示在一边对齐

            7.浮动的元素不会盖住文字，文字会自动环绕在浮动的元素周围
            8.块元素脱离文档流后，高度和宽度都被内容撑开
            9.开启浮动后，内联元素脱离文档流后会变成块元素
         */
    </style>
</head>

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

</html>

解决高度塌陷

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        /* 
    根据W3C协议，页面元素有一个隐含属性，简称BFC，该属性可以设置打开或关闭，默认是关闭的
        1. 父元素的垂直外边距不会和子元素重叠
        2.开启BFC的元素不会被浮动元素所覆盖
        3.开启BFC的元素可以包含浮动的子元素
    如何开启元素的BFC
        1. 设置元素浮动
            使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失
                而且使用这种方式也会导致下边的元素上移，不能解决问题
        2.设置元素绝对值
        3. 设置元素伪inline-block
            可以解决问题，但是会导致宽度丢失，不推荐
        4.将元素的overflow设置为一个非visible值，不推荐

        推荐方式：
            将overflow设置为hiddow，副作用相对较小的开启BFC的方式

        overflow：hidden;
     */
    </style>
</head>

<body>

</body>

</html>

清除浮动和解决高度塌陷最终方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        /* 
    clear 可以清除其他浮动元素对当前元素的影响
    可选值：
        1、none 默认值，不清除浮动
        2、left 清除左侧浮动元素对当前元素的影响
        3、right 清除右侧浮动元素对当前元素的影响
        4、both 清除两侧浮动元素对当前元素的影响，
            默认清除对当前元素影响较大的元素
     */
        /* 
    通过after伪类向元素的最后添加一个空白的块元素，然后对齐清除浮动，
    这样做和添加一个div的原理一样，可以达到一个相同的效果，
    而且不会在页面中添加多余的div，这是最推荐的使用方法
     */
        
        .clearfix:after {
            /* 添加一个内容 */
            content: "";
            /* 转换为一个块元素 */
            display: block;
            /* 清除两侧的浮动 */
            clear: both;
        }
        /* 
    在IE6中不支持after伪类，
    所以在IE6中还需要使用hasLayout来处理
     */
        
        .clearfix {
            zoom: 1;
        }
    </style>
</head>

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

</html>