本文详细介绍了CSS中的浮动概念，包括浮动的作用、语法、特性及其在布局中的应用。通过三个具体的效果案例，展示了如何使用浮动实现盒子的水平排列和对齐。同时，讨论了浮动元素与父盒子、兄弟盒子的关系，以及在实际布局中可能遇到的问题和解决策略。
效果1
大盒子：长1200px，宽460px
左盒子：长230px，宽460px
右盒子：长970px，宽460px
效果2
大盒子：长1226px，宽285px
小盒子：长269px，宽285px，间距14px
效果3
大盒子：长1226px，宽615px
左盒子：长234px，宽615px
右盒子：长992px，宽615px
右小盒子：长234px，宽300px，间距14px
知识点
浮动float
CSS布局的三种机制
1.普通流（标准流）
- 块级元素会独占一行，从上向下顺序排列，例如：div、hr、p、h1~h6、ul、ol、dl、form、table等
- 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘自动换行，例如：span、a、i、em等
2.浮动
让盒子从普通流中浮起来，主要作用是让多个块级盒子一行显示
3.定位
将盒子定在浏览器的某一个位置——CSS离不开定位，特别是后面的js特效
为什么要设置浮动？
虽然我们可以用之前学到过的display：inline-block实现块元素在一行显示，
但块元素之间会有空白缝隙，也不能实现元素之间的对齐。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动示例</title>
<style>
div {
最低0.47元/天 解锁文章
151
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
