1、css浮动
概述
网页中有很多布局效果,标准流没有办法完成,使用可以利用浮动改变元素默认的排列方式,举例说明(如网页中横向排列的模块或者一左一右排列的模块)。
1.1、浮动的概念
浮动可以使元素【脱离文档流】,【按照指定方向排列】,直到遇到父元素的边界或另一个浮动元素【停止】。
1.2、浮动属性
-
float
-
left 左浮动
-
right 右浮动
-
float:none 不浮动(默认值)
-
1.3、浮动的基本特性
-
可以使块元素在一行排列
-
脱离文档流
-
提升层级
1.4、浮动的问题(为什么要清浮动)
-
子元素浮动导致父元素高度塌陷
-
影响之后元素的布局
1.5、清浮动的方法
解决问题即清除动的方法
-
父元素固定高度法
-
描述:给浮动元素的父元素固定高度
-
缺点:不够灵活
-
代码演示
-
-
父元素overflow方法
-
描述:给父元素加 overflow 属性,overflow 为 visible 以外的其它值时可以帮助实现
-
缺点:可能会隐藏内容或触发不需要的滚动条
-
-
额外标签法
-
描述:在浮动元素的最后加一个空块元素,此元素本身不浮动,且添加样式
clear:both
-
clear属性说明
-
作用:清除浮动
-
取值
-
left
-
both
-
right
提示通常使用both!
-
-
-
缺点:代码冗余,影响代码可读性
-
-
伪元素:after
-
描述:给浮动标签的父标签添加
-
优点:内容适应性强,不会在结构上产生冗余代码,可多次重复使用
-
作为通用代码总结
-
1.6、浮动特性总结
-
脱离文档流
-
提升层级
-
对块元素的影响
-
使块元素在一行排列
-
未定宽度的块元素适应内容
-
-
对行内元素的影响
-
生成了一个块级框即 (1)支持宽高 (2)支持垂直方向的margin,padding (3)支持行高、text-align等文本属性
-
-
脱离文档流不脱离文档流
1.7、浮动特性应用实例
1.7.1、 应用实例图文绕排
-
总结:浮动脱离文档流不脱离文本流
-
扩展了解: 最初只用于在成块的文本内浮动图像,现在它已成为在网页上创建多列布局的最常用工具之一
-
代码演示
1.7.2、两列自适应
-
实现要点:单列定宽,单列自适应
-
浮动实现
说明:左侧列固定,左侧浮动,右侧列使用margin-left预留位置, 右侧列固定同理
-
代码演示