本文探讨了CSS布局中的浮动流排版，包括浮动元素如何影响兄弟元素和导致父元素高度塌陷的问题。针对这些问题，提出了设置浮动、清除浮动、使用overflow隐藏以及after伪类清除浮动等解决方案，旨在维护页面布局的整洁和有序。
^标准流排版^
在浏览器中默认的排版方式就是标准流排版方式，也叫做文档流或者普通流：
在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版
垂直排版：如果元素是块级元素, 那么就会垂直排版
水平排版： 如果元素是行内元素/行内块级元素, 那么就会水平排版
如果我们需要将块级元素在页面中水平排列的话，可以将其块元素脱离标准流(文档流/普通流)，使用float属性来使元素浮动，从而脱离标准流(文档流/普通流)。(float: left / none / right)
^浮动流排版^
1.浮动流是一种"半脱离标准流"的排版方式
2.浮动流只有一种排版方式, 就是水平排版.
它只能设置某个元素左对齐或者右对齐
注意点:当我们为一个元素设置浮动之后（float属性值非none），元素会立即脱离标准流(文档流/普通流)，那么它下方的元素会立即向上移动，后面的元素会被前面的元素盖住。
浮动元素对兄弟元素的影响
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale&#
最低0.47元/天 解锁文章
扫一扫
2102
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
