CSS 浮动

浮动的作用

引用张鑫旭对浮动的评价：

个人观点之浮动的意义仅仅是文字环绕显示而已
个人观点之浮动的本质是“包裹及破坏”
个人观点之目前大多数浮动应用都不是浮动应该做的
个人观点之浮动其实是个魔鬼、混球

所以现在是2022年了，没必要滥用float。

示例

没有浮动时的效果

一个简单的HTML结构：

html

<div class="wrapper">
    <div class="box">box</div>
    <p class="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem
        placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci.</p>
</div>

<p class="p2">Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat.
    Suspendisse ac imperdiet turpis. </p>

css

.wrapper{
    border: 4px solid #66666680;
    padding: 8px;
}

.box{
    width: 160px;
    height: 200px;
    background: #FFFF6680;
    padding: 8px;
    margin: 8px;
}

.p1{
    padding: 8px;
    background: #42b88380;
}

.p2{
    
}

效果：

（文本内容 copy 自 MDN 上的例子，我也不知道写的什么。）

box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.

Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.

加了浮动的效果

给box加浮动float: left;：

box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.

浮动产生的问题

浮动会使元素脱离正常文档流，导致父元素高度塌陷，并且影响了后面的段落。

清除浮动的方式

手动清除浮动

给p2加上clear: left;：

box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.

clear fix 方式

给wrapper增加：

css

.wrapper::after {
    content: "";
    clear: both;
    display: block;
}

box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.

`overflow` 属性

给wrapper设置overflow: auto;，原理是建立BFC：

box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.

`display: flow-root`

给wrapper设置display: flow-root;，原理也是建立BFC：

box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.

总结

浮动会使元素脱离正常文档流。
float可以应用在任何元素，包括块盒，行盒，部分文本等。
浮动元素的排列方向
对于连续多个浮云元素，如果是float: left，则从左向右排列，如果是float: right，则从右向左排列。
clear属性只影响元素自身

参考

浮动｜ MDN

CSS 浮动 ​

浮动的作用 ​

示例 ​

没有浮动时的效果 ​

加了浮动的效果 ​

浮动产生的问题 ​

清除浮动的方式 ​

手动清除浮动 ​

clear fix 方式 ​

overflow 属性 ​

display: flow-root ​

总结 ​

参考 ​

CSS 浮动

浮动的作用

示例

没有浮动时的效果

加了浮动的效果

浮动产生的问题

清除浮动的方式

手动清除浮动

clear fix 方式

`overflow` 属性

`display: flow-root`

总结

参考