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

相关文章
|
2月前
|
前端开发
CSS网页布局综合练习
CSS网页布局综合练习
|
2月前
|
前端开发
CSS网页布局综合练习(涵盖大多CSS知识点)
CSS网页布局综合练习(涵盖大多CSS知识点)
|
2月前
|
前端开发
CSS网页布局综合练习(涵盖大多CSS知识点)
CSS网页布局综合练习(涵盖大多CSS知识点)
|
2月前
CSS_定位_网页布局总结_元素的显示与隐藏
CSS_定位_网页布局总结_元素的显示与隐藏
25 0
学习CSS3 中的渐变、阴影与遮罩
CSS3的渐变、阴影和遮罩特性极大地丰富了网页设计。渐变让颜色平滑过渡,赋予页面流动美感;阴影增加元素立体感,引导视觉焦点;遮罩通过隐藏或显示部分元素创造独特视觉效果。这些特性组合使用,可打造丰富多彩、立体生动的视觉体验,并可通过CSS3动画增强动态效果,使网页更具活力。正确应用这些特性需考虑参数调整及跨浏览器兼容性,以确保最佳展示效果。
|
3月前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍,主要解决多个`<div>`标签在同一行显示的问题,即一个在左边,另一个在右边。文中介绍了标准流、浮动及flex布局的概念,重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法,包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法,并提供了示例代码帮助理解。
|
3月前
|
前端开发
|
3月前
|
Web App开发 移动开发 自然语言处理
|
4月前
|
前端开发 容器
【CSS Flexbox 探秘】弹性盒模型:揭秘网页布局的终极神器!
【8月更文挑战第25天】Flexbox 是 CSS3 中的关键特性,为网页设计提供了强大的布局能力。本文通过问答形式全面解析 Flexbox 的核心概念与属性,包括容器与项目属性,并通过示例演示如何使用 Flexbox 实现水平与垂直居中、等间距布局及响应式设计。相较于传统布局方法,Flexbox 更加灵活且简化了样式设置,同时在现代浏览器中拥有良好的支持度。掌握 Flexbox 对于提升网页布局效率至关重要。
66 1
|
4月前
|
前端开发 容器
前端面试热门问题--浮动和清除浮动(CSS)
前端面试热门问题--浮动和清除浮动(CSS)