19.float

最新推荐文章于 2024-08-11 11:01:02 发布

原创最新推荐文章于 2024-08-11 11:01:02 发布 · 166 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3

CSS3 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了CSS中的`float`属性及其在页面布局中的应用。通过示例展示了如何使用`float:left`和`float:right`使元素向左或向右浮动，并讨论了由此引发的父级边框塌陷问题。文章提供了四种解决塌陷的方案，包括增加空div、设置固定高度、使用`overflow:hidden`和父级元素的`:after`伪类。总结了各种方法的优缺点，推荐使用`:after`伪类作为最佳实践。

19.float

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="father">
    <div class="layer01">
        <img src="images/a.png" alt="">
    </div>
    <div class="layer02">
        <img src="images/b.png" alt="">
    </div>
    <div class="layer03">
        <img src="images/c.png" alt="">
    </div>
    <div class="layer04">
        浮动的盒子可以向左浮动，也可以向右浮动。
    </div>
</div>
</body>
</html>

css:

#father{
    border: 1px solid #000;
}
#father:after{
    content: "";
    display: block;
    clear: both;
}
.layer01{
    border:1px dashed #dde96b;
    display: inline-block;
    float: left;
}
.layer02{
    border:1px dashed #736be9;
    display: inline-block;
    float: left;
}
.layer03{
    border:1px dashed #ef1d7f;
    display: inline-block;
    float: right;
}
.layer04{
    border:1px dashed #e98f6b;
    display: inline-block;
    float: right;
}


/*clear
    clear:right; 右侧不允许右浮动元素
    clear:left;  左侧不允许右浮动元素
    clear:both;  两侧不允许右浮动元素
    clear:none;  允许
*/

/*父级边框塌陷问题解决方案
    1.增加父级元素的高度（不推荐）
        #father{
        border: 1px solid #000;
        height: 800px;
            }
    2.增加一个空的div标签，清除浮动。
        <div class="clear"></div>
        .clear{
                margin: 0;
                padding: 0;
                clear:both;
               }
    3.在父级元素中增加一个overflow:hidden
    4.父类添加一个伪类：after(常用)
        #father:after{
                        content: "";
                        display: block;
                        clear: both;
                    }
*/
/*小结：
    1、浮动元素后面增加空div
        简单，代码中尽量避免空div
    2、设置父元素的高度
        简单，元素有固定高度，就会被限制
    3、overflow
        简单，下拉的一些场景避免使用
    4、父类添加一个伪类：after(推荐)
        写法稍微复杂
*/
/*对比
    display:
        方向不可控制，但不会脱离标准文档流
    float:
        方向可以控制，但浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题
*/

运行结果：
在这里插入图片描述