css浮动

css布局的三种机制 0920

## 布局需求

浮动布局常用套路

• 由于浮动会脱标
• 所以一般给浮动的盒子一个标准流的父亲
• 标准流的父亲会限定浮动元素的范围
• 有了范围的限定就不会乱跑去干扰其它的元素了

演练

演练 实现上二下一的布局 0930 css - 知乎
https://zhuanlan.zhihu.com/p/260626727

解决思路

• 定义两个标准流的盒子
• 上盒子再布局两个浮动的内盒子
• ## 浮动的基本使用 0920

浮动概念

功能

格式

• 演示，图文混排效果

浮动的特点 0920

01 浮动现象

浮动的效果，就是浮起来

灵魂浮动

https://www.ixigua.com/6421772256598295042?logTag=Sl2IFCARRibwAy4gJ-8Re

白素贞灵魂出窍扮观音险现原形，急坏了小青：如现原形胎儿保不住 - 西瓜视频
https://www.ixigua.com/6719296166237831694?logTag=XFMABQm_eTs5nEff9cGzU

小阳看原著：《哈利波特》也不免俗，霍格沃茨的七个鬼故事！(上) - 结合原著看电影——《哈利波特》 - 西瓜视频
https://www.ixigua.com/6869569512048427532?logTag=7uMojUAOlK25Ewo1ZEudj

浮起来的物体，是虚化的物体

不会占据空间

浮动的对象，和灵魂一样

不会占据人间的空间

02 脱离标准文档流

浮动的盒子不占位置

脱离标准文档流

03 改变display

浮动后的标签，display会具有行内块inline-block的部分特性

• 试一试，a签浮动
• 试一试，两个a标签浮动，关注与行内块的区别

演练

https://zhuanlan.zhihu.com/p/260529114

04 多个盒子的飘移

如果有多个盒子向左飘移

飘移的盒子是会排队展现的

演练

https://zhuanlan.zhihu.com/p/260533333

05 多个盒子飘移 空间不够时

多出的盒子会换行显示

https://zhuanlan.zhihu.com/p/260539359