本文详细介绍了CSS中的浮动属性，包括left、right和none，以及浮动元素如何影响其他元素的布局。同时，讨论了clear属性用于清除浮动的影响。此外，文章还探讨了盒模型，它是CSS布局的基础，涉及内容区、边框、补白和边界等概念。还提到了在实际应用中遇到的问题，如子元素margin-top导致父元素位置变动的解决方案。
一、浮动
1.属性：
float：left ;左浮动、right：右浮动、none ；没有浮动
浮动会脱离网页文档，与其他不浮动的元素发生重叠
但是不会与文字发生重叠，文字会环绕浮动元素显示
2.clear：清除浮动
none 允许浮动、right 不允许右浮动、left 不允许左浮动、both 不允许
有浮动
清除浮动只是改变元素的排列方式，该元素还是漂浮着，不占据文档位置。
3.
盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有
的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区
，这就是盒模型
padding：填充：padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距
离。 也称补白
padding：left 、right 、top、bottom
margin：
margin-left:左边界 margin-right:右边界 margin-top:上边界 margin-bottom:下边界 属性值的4种方式：margin可以给负数
现象：
默认情况下给子元素添加了margin-top之后，父元素会跟着一起下来。
解决方法：
A、给最近的父元素添加border-top
B、给父元素添加overflow:hidden;（溢出隐藏)
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
