css——浮动布局(float)以及清除浮动

最新推荐文章于 2023-09-16 16:19:45 发布

徕胖

最新推荐文章于 2023-09-16 16:19:45 发布

阅读量925

点赞数

分类专栏： html

本文链接：https://blog.youkuaiyun.com/leilei7407/article/details/118532108

版权

浮动布局是通过CSS的float属性实现元素脱离文档流，常用于创建多列布局。文章介绍了浮动布局的特点，如元素脱离文档流但仍保持在父元素内，以及由此产生的高度塌陷问题。为了解决高度塌陷，文章详细讲解了清除浮动的三种方法，包括使用额外空标签、伪元素选择器和overflow属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浮动方式布局就是使用 float 属性，使元素脱离文档流，浮动起来。

浮动布局的特点：会让元素脱离文档流（不占据原来的位置），但同时也会有一些副作用（高度塌陷）
为什么需要浮动？有很多布局效果，标准流布局无法完成，因为浮动可以改变元素标签默认的排列方式。
举例说明：让多个块级元素在一行显示
方式1：标准流布局方式是将块级元素的display属性设置为inline-block，但这样虽然可以实现，但他们之间会有空白间隙，不好控制。
方式2：可以将，这些块，都设置浮动（即添加float属性），并且浮动方向相同。不会有空白间隙

<body>
    <style>
    /* 利用浮动布局使得多个块级元素在一行显示 */
        div{
     
            float: left;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
    <div >div1</div>
    <div >div2</div>
    <div >div3</div>
  
</body>

在这里插入图片描述

注意;:只有左右浮动，并没有上下浮动（即添加了浮动后的元素会左右移动，上下不会移动）,。
浮动布局特点：（给元素设置了浮动布局后，会产生什么效果？）

添加浮动以后，元素会脱离文档流，即不再占有文档流中的位置，层级提升半级。

任何元素都可以添加浮动，不管原先是什么模式的元素。
- 添加浮动后元素变成行内块元素，默认宽度为内容宽，而不是父宽。但它与inline-block还是有一些区别的，第一个就是关于横向排序的时候，float可以设置方向而inline-block方向是固定的；还有一个就是inline-block在使用时有时会有空白间隙的问题，而浮动没有。

元素浮动后，会尽量向左或向右移动，直到它的外边缘碰到父元素内容边框或另一个浮动外框的为止

最明显的缺点就是浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素高度塌陷。父元素会当浮动元素不存在。（当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。）

添加浮动后的元素，只会影响浮动元素，不会影响前面的元素。

元素无论怎么浮动，最终还是在包含框（父元素框）之内。

浮动元素会压住下面的标准流盒子，但是不会压住下面标准流的文字（图片）。即可以这样理解：对于标准流中的文字来讲，浮动元素并没有脱标

脱标的盒子不会触发外边距合并问题，所以浮动元素，绝对定位（固定定位

最低0.47元/天解锁文章