HTML流式布局:从左向右,由上往下排布
总结:浮动的元素会不占据标准流的空间,但是会影响标准流中的文本排版。
float属性:
left 元素向左浮动
right 元素向右浮动
none 默认值,元素不浮动
浮动的特性:
1.浮动脱离标准流,不占位置,但是会影响标准流。浮动只能往左右浮动。
2.浮动元素A的排列位置。如果A的上一个元素有浮动,则A元素的顶部和上一个元素顶部对齐。如果上一个元素为标准流,则A元素的顶部会紧挨着上一个元素的底部。
3.一个父盒子里的子盒子,如果有一个浮动,则其他子集也需要浮动才能对齐显示。
4.浮动根据书写位置显示
5.当元素设置浮动,没有设置宽高,元素根据内容大小决定大小,具有包裹性
6.浮动具有破坏性。元素浮动以后,就不再占据原始文档流,就会造成文档流塌陷。
文档塌陷的解决办法:
overflow: hidden; 超出部分进行隐藏
overflow属性:
visible 内容不会被修剪,会呈现在元素框之外(默认值)
hidden 溢出内容进行修剪,并且被修剪的内容不可见。
auto 在需要时产生滚动条,即自适应所显示内容
scroll 溢出内容会被修剪,且浏览器会始终显示滚动条。
CSS布局高级
版心的概念:网站的核心展示区域一般居中显示,版心宽度的PC端一般是960px,980px,1000px,1190px,1200px
自适应布局方式:
clear: both; 清除浮动:就是让当前元素左右元素都不存在浮动的时候,才放在标准流中显示