🏀标准流🏀
标签按照规定好的默认方式排序
块级元素独占一行 从上向下顺序排列
div hr p h1-h6 ul ol form table
🥎 为什么需要浮动嘞?🥎
很多的布局效果,标准流没有办法完成,就需要利用到浮动完成布局.
浮动可以改变元素标签默认的排列方式
网页布局第一准则:
多个块级元素纵向排列找标准流
多个块级元素横向排列找浮动
⚾ 什么是浮动?⚾
float 属性用于创建浮动框
将其移动到一边,直到左边缘或者右边缘及包含块或者另一个浮动框的边缘
🥌 浮动特性🥌
1.脱离标准普通流的控制移动到指定位置 脱标
2.浮动的盒子不再保留原先的位置
3.多个盒子都设置浮动,按照属性值一行并排顶端对齐排列(不会有缝隙,多出另起一行对齐)
4.浮动元素会具有行内块元素特性(任何元素都可浮动)
- 如果块级盒子没有设置宽度,默认宽度和父级一样宽,添加浮动后,大小由内容决定
- 行内元素同理
🏐实战小技巧🏐
- 为了约束浮动元素位置,网页布局一般采用的策略:先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置
🌕清除浮动 🌕
🌒为什么要清除浮动? 🌒
由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占位置,最后父级盒子高度为0时,就会影响下面的标准流盒子.
1.父级没有高度
2.子盒子浮动了
3.影响下面布局
🌑清除浮动方法🌑
清除浮动本质:
清除浮动元素脱离标准流造成的影响
清除浮动策略:
闭合浮动,只让浮动在父盒子内影响,不影响父盒子外面的其他盒子
1. 父级添加overflow 属性值设置hidden auto scroll 🌒
弊端:无法显示溢出的部分
父盒子 500px 子盒子 600px (子盒子的100px被隐藏)
2.:after 伪元素法 🌓
