【学习笔记】CSS深入理解之float
float的历史
float为产生文字环绕效果而生
float的特性 — 包裹和破坏
包裹:即产生一个BFC
破坏:使父容器塌陷,元素脱离文档流,产生inline boxes环绕
清除浮动
方式一:使用clear,类似于产生一个连接索道,使前文和后文关联,会产生margin重叠效果。
- clear: both,这个元素和源码中后面的元素将不浮动
- 非浮动元素和浮动元素之间不能通过外边距撑开距离
- 因此需要一个单独的非浮动元素充当索道
方式二:父容器BFC或者haslayout(IE6/IE7) - 封闭容器,不会产生margin重叠
.clearfix:after { content: ""; display: table; clear: both; } .clearfix { *zoom: 1; /*IE6, IE7产生haslayout*/ }
float的表现
元素block化:inline元素被block化
去空格化,空格符成为环绕文本
浮动与流体布局应用
文字环绕效果
https://codepen.io/curlywater...
左中右效果
https://codepen.io/curlywater...
单侧固定
https://codepen.io/curlywater...
DOM与显示位置匹配的单侧固定
https://codepen.io/curlywater...
第一种实现方式,保证向右浮动的元素写在前(先布局),内容区设置margin-right
第二种实现方式,为了使DOM和现实顺序一致,对内容区加一个向左浮动的盒子,没有指定宽度的盒子利用外边距保留剩余空间,实现宽度拉伸。使用负margin把左浮动的头像区移动到同行。
两侧自适应
https://codepen.io/curlywater...
使用table-cell产生一个BFC,去除掉浮动的影响
总结
浮动起源于实现文字环绕效果。
为了实现文字环绕效果,规范规定的措施是使父容器塌陷,元素脱离文档流浮动,元素周围的内容转换为inline boxes围绕元素排列。
从浮动的起因和浮动的实现后果来看,浮动不适合用于大范围的布局,更适合利用其特性实现一些小范围的流体布局效果。