HTML5浮动

1.标准文档流组成

块级元素(block)

内联元素(inline)

2.display属性

作用:指定HTML标签的显示方式

常用属性

|------------------|------------------------------------------|
| | 说明 |
| block | 块级元素的默认值,元素会被显示为块级元素,该元素前后会带有换行符 |
| inline | 内联元素的默认值。元素会被显示为内联元素,该元素前后没有换行符 |
| inline-block | 行内块元素,元素既具有内联元素的特性,也具有块元素的特性 |
| none | 设置元素不会被显示 |

3.display使用技巧

1、块级元素与行级元素的转变(block,inline)

2、控制块元素排成一行(inline-block)

3、控制元素的隐藏(none)

4.浮动属性

|-----------|------------------------------|
| 属性值 | 说明 |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
| none | 默认值。元素不浮动,并会显示在其文本中出现的位置 |

5.clear属性

|-----------|---------------------|
| | 说明 |
| left | 在左侧不允许浮动元素 |
| right | 在右侧不允许浮动元素 |
| both | 在左、右两侧不允许浮动元素 |
| none | 默认值。允许浮动元素出现在两侧 |

6.解决父级边框塌陷

1、clear属性可以清除浮动对其他元素造成的影响,可是依然解决不了父级边框塌陷问题,怎么办?

浮动元素后面加空div

设置父元素的高度

父级添加overflow属性

父级添加伪类after

2、浮动元素后加空div

3、设置父元素的高度

4、父级添加 overflow属性

overflow属性:溢出处理

|-------------|---------------------------------|
| 属性值 | 说明 |
| visible | 默认值。内容不会被修剪,会呈现在盒子之外 |
| hidden | 内容会被修剪,并且其余内容是不可见的 |
| scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余内容 |
| auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容 |

5、父类添加伪类after

7.清除浮动,防止父级边框塌陷的四种方法

浮动元素后面加空div

简单,空div会造成HTML代码冗余

设置父元素的高度

简单,元素固定高会降低扩展性

父级添加overflow属性

简单,下拉列表框的场景不能用

父级添加伪类after

写法比上面稍微复杂一点,但是没有副作用,推荐使用

8.display:inline-block与float

display:inline-block

可以让元素排在一行,并且支持宽度和高度,代码实现起来方便

位置方向不可控制,会解析空格

IE 6、IE 7上不支持

float

可以让元素排在一行并且支持宽度和高度,可以决定排列方向

float 浮动以后元素脱离文档流,会对周围元素产生影响,必须在它的父级上添加清除浮动的样式

相关推荐
GISer_Jing6 分钟前
React 18的createRoot与render全面对比
前端·react.js·前端框架
我叫汪枫8 分钟前
React Hooks原理深度解析与高级应用模式
前端·react.js·前端框架
我叫汪枫8 分钟前
深入探索React渲染原理与性能优化策略
前端·react.js·性能优化
阿智@1120 分钟前
推荐使用 pnpm 而不是 npm
前端·arcgis·npm
伍哥的传说31 分钟前
QRCode React 完全指南:现代化二维码生成解决方案
前端·javascript·react.js·qrcode.react·react二维码生成·qrcodesvg·qrcodecanvas
IT_陈寒36 分钟前
Vite 5.0 终极优化指南:7个配置技巧让你的构建速度提升200%
前端·人工智能·后端
listhi52040 分钟前
Map对象在JavaScript循环中的使用
开发语言·前端·javascript
安卓开发者1 小时前
鸿蒙Next Web组件生命周期详解:从加载到销毁的全流程掌控
前端
我叫汪枫4 小时前
前端物理引擎库推荐 - 让你的网页动起来!
前端
雾恋8 小时前
最近一年的感悟
前端·javascript·程序员