CSS:浮动
2021/7/29 6:06:29
本文主要是介绍CSS:浮动,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
浮动
传统网页布局的三种方式
网页布局的本质——用CSS来摆放盒子。把盒子摆放到相应位置。
CSS提供了三种传统布局方式:
- 普通流(标准流):标签按照规定好默认方式排列。块级元素独占一行,行内元素按顺序从左至右排列。
- 浮动
- 定位
为什么需要浮动?
什么是浮动?
浮动特性(重难点)
1. 浮动元素会脱离标准流(脱标)
设置了浮动(float)元素最重要特性:
- 脱离标准普通流的控制(浮)移动到指定位置(动)
- 浮动的盒子不再保留原先的位置
2. 浮动的元素会一行内显示并且元素顶部对齐
3. 浮动的元素会具有行内块元素的特性
浮动元素经常和标准流父级搭配使用
浮动布局注意点
清除浮动
为什么要清除浮动
清除浮动本质
清除浮动方法
额外标签法(隔墙法)
父级添加overflow
:after伪元素法
双伪元素清除浮动
这篇关于CSS:浮动的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-07uniapp动态设置不同的css有哪些方法?-icode9专业技术文章分享
- 2024-12-07UniApp 中,怎么通过 CSS 设置 view 组件的水平居中效果?-icode9专业技术文章分享
- 2024-12-06TailwindCSS开发入门教程
- 2024-12-06TailwindCSS项目实战:从入门到上手
- 2024-12-06TailwindCss项目实战:初学者指南
- 2024-12-05TailwindCSS入门指南:轻松上手实用教程
- 2024-12-05TailwindCss入门指南:轻松上手实用技巧
- 2024-12-04Tailwind.css入门:简洁高效的设计利器
- 2024-12-03Tailwind.css学习:从入门到实战的全面指南
- 2024-11-29Tailwind.css入门指南:快速上手实用教程