1、css浮动
概述
网页中有很多布局效果,标准流没有办法完成,使用可以利用浮动改变元素默认的排列方式,举例说明(如网页中横向排列的模块或者一左一右排列的模块)。
1.1、浮动的概念
浮动可以使元素【脱离文档流】,【按照指定方向排列】,直到遇到父元素的边界或另一个浮动元素【停止】。
1.2、浮动属性
-
float
-
left 左浮动
-
right 右浮动
-
float:none 不浮动(默认值)
-
1.3、浮动的基本特性
-
可以使块元素在一行排列
-
脱离文档流
-
提升层级
1、css浮动
概述
网页中有很多布局效果,标准流没有办法完成,使用可以利用浮动改变元素默认的排列方式,举例说明(如网页中横向排列的模块或者一左一右排列的模块)。
1.1、浮动的概念
浮动可以使元素【脱离文档流】,【按照指定方向排列】,直到遇到父元素的边界或另一个浮动元素【停止】。
1.2、浮动属性
-
float
-
left 左浮动
-
right 右浮动
-
float:none 不浮动(默认值)
-
1.3、浮动的基本特性
-
可以使块元素在一行排列
-
脱离文档流
-
提升层级
1.4、浮动的问题(为什么要清浮动)
-
子元素浮动导致父元素高度塌陷
-
影响之后元素的布局
1.5、清浮动的方法
解决问题即清除动的方法
-
父元素固定高度法
-
描述:给浮动元素的父元素固定高度
-
缺点:不够灵活
-
代码演示
-
-
父元素overflow方法
-
描述:给父元素加 overflow 属性,overflow 为 visible 以外的其它值时可以帮助实现
-
缺点:可能会隐藏内容或触发不需要的滚动条
-