CSS学习第五天(网页布局三大准则)(浮动(重点))(3)

简介: CSS学习第五天(网页布局三大准则)(浮动(重点))

5.1 清除浮动(闭合策略)

(重点)清除浮动的原因:是因为网页中的每个盒子的内容是不好确定的,盒子中的内容如果大于所设置的高度则会撑大盒子,故实际应用中需要清除浮动。如果可以确定盒子高度的时候则不需要清除浮动。

清除浮动的语法是:

020d67fd57184bccada4142e3fc724b7.png


清除浮动的方法(4种)

2ef02bc401f14c0b91d0a00740329757.png

5.1.1 额外标签法(书写最后充当墙的元素时必须是块级元素)

a48dc0a7f0634414ba26e37bc542d2e6.png

每次书写在最后写一个div,CSS中设置clear:both清除浮动当成一堵墙来使用,盒子会自动检测高度无论有多少个子元素

5.1.2 overflow

70a1c0cd31904f1fb8798be3b948eb25.png

在清除浮动时,找到该盒子的父级元素,然后添加overflow属性

392cc17658324132ae133a8e32742506.png


5.1.3 after伪元素法

e997d43beb8b4b64beac536173f2e775.png

注意:直接粘贴代码,其中需要将行内元素转换为块级元素。然后在父级元素中添加clearfix。

00fd76d9c4994516b360a0672093d7aa.png

5.1.4 双伪元素清除浮动(一个before,一个after)

bf4e8cc1528340659ed66bdd688cc62e.png62be752f7214406293f4ed9a8917d258.png

相关文章
|
10天前
|
前端开发 开发者 UED
解锁网页布局的秘密武器:探索 CSS Grid 布局的神奇魔力
解锁网页布局的秘密武器:探索 CSS Grid 布局的神奇魔力
17 3
|
5天前
|
编解码 缓存 前端开发
【专栏:HTML与CSS移动端开发篇】移动端网页布局与适配
【4月更文挑战第30天】本文探讨了如何使用HTML和CSS优化移动端网页布局与适配,强调响应式设计、灵活布局和媒体查询的重要性。针对移动设备的屏幕尺寸、操作方式、网络速度和性能差异,提出了断点选择、触摸优化、图像和性能优化等最佳实践。测试和调试、框架工具的应用也是关键步骤,以确保在多设备上提供优秀用户体验。开发者需持续学习新趋势和工具,以适应移动端发展。
|
5天前
|
前端开发 开发者 容器
【专栏:CSS基础篇】CSS定位与布局:从静态到浮动、定位
【4月更文挑战第30天】本文介绍了CSS定位与布局的基础,包括静态、相对、绝对、固定定位以及浮动。静态定位遵循HTML顺序,相对定位可在正常位置基础上偏移,不占用额外空间。绝对定位基于最近已定位祖先元素定位,脱离文档流。固定定位相对于浏览器窗口定位,无视页面滚动。浮动用于文字环绕图片等,可能导致父元素高度塌陷。Flexbox布局提供更灵活的元素排列和对齐方式,适配各种复杂布局需求。理解并掌握这些布局技术能提升网页设计的灵活性和响应性。
|
6天前
|
XML 前端开发 JavaScript
CSS中动画、过渡、定位、浮动的作用
CSS中动画、过渡、定位、浮动的作用
|
1月前
|
前端开发
CSS动画知识点学习
【4月更文挑战第2天】CSS动画知识点学习
20 3
N..
|
2月前
|
前端开发 容器
DIV+CSS网页布局
DIV+CSS网页布局
N..
9 0
N..
|
2月前
|
前端开发 容器
CSS 网页布局元素
CSS 网页布局元素
N..
23 1
|
2月前
|
前端开发 JavaScript 开发者
编程笔记 html5&css&js 014 网页布局框架
编程笔记 html5&css&js 014 网页布局框架
|
2月前
|
前端开发 搜索推荐 JavaScript
编程笔记 html5&css&js 001 学习编程从网页开始
编程笔记 html5&css&js 001 学习编程从网页开始
|
3月前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
66 1