给子元素添加float浮动以及父元素清除浮动

最新推荐文章于 2024-03-20 17:44:36 发布

鹏鹏鹏于晏

最新推荐文章于 2024-03-20 17:44:36 发布

阅读量517

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/m0_54102950/article/details/123308869

版权

本文介绍了CSS中的浮动属性`float`，包括`float:left`和`float:right`的效果。`float:left`使元素向左浮动，保持在父元素的左侧，而`float:right`则让元素向右浮动，显示在父元素右侧。同时强调了在使用浮动布局时，为避免父元素高度塌陷，需要对父元素进行浮动清除。示例中展示了如何通过添加伪元素和`clear:both`来清除浮动。

摘要由CSDN通过智能技术生成

float:left 左浮动

左浮动跟div初始状态没有区别

        .box1 {
            width: 100px;
            height: 100px;
            background-color: green;
            /* 左浮动 */
            float: left;
        }

效果

float：right 右浮动可以让小div盒子放在大盒子的右边

     .box2 {
            width: 100px;
            height: 100px;
            background-color: blue;
            /* 右浮动 */
            float: right;
        }

效果

给子元素添加浮动的同时一定要给父元素清除浮动避免带来难以发现的小bug

  .box {
            width: 400px;
            height: 200px;
            border: 1px solid red;
            margin: 100px auto;
            /* 清除浮动 */
            content: '';
            display: block;
            clear: both;
        }