首页 > web前端 > html教程 > float学习笔记_html/css_WEB-ITnose

float学习笔记_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
发布: 2016-06-24 11:28:49
原创
1150 人浏览过

float 系统学习

  • float的原本作用是产生文字环绕效果
  • float可以产生包裹、隔绝的效果( BFC)、破坏性

其他具有包裹性质的属性

display : inline-block table-cellposition: absolute/fixed/sticky???overflow: hidden/scroll
登录后复制

什么是破坏性

父元素的高度塌陷
登录后复制

其他具有破坏性的属性

display: noneposition: absolute/fixed/sticky
登录后复制

清除浮动(放在浮动元素的父元素上)

  • clear
  • bfc

clearfix的代码

.clearfix:after {    content: '';    display: block;    height: 0,    overflow: hidden;    clea    r: both;}.clearfix {     *zoom:1}/*兼容IE6、7*//****************方式二*******************/.clearfix:after {    content: '';    display: table;    clear: both;}.clearfix {    zoom:1;}
登录后复制

BFC

float: left/rightposition: absolute/fixedoverflow: hidden/scrolldisplay: inline-block/tabel-cellwidth/height/zoom:1(*IE6/IE7*)
登录后复制

浮动可以用来去除元素之间的空格

‘ ’;的空格可能会对布局造成影响因为‘‘‘ ’;当做普通文本来显示了

浮动与流体布局

???高端的

float

display: inline-block

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
学习笔记
来自于 1970-01-01 08:00:00
0
0
0
php学习心得
来自于 1970-01-01 08:00:00
0
0
0
Reactjs中的UI没有被更新
来自于 1970-01-01 08:00:00
0
0
0
mysql - 请教一个Java做数据库缓存的问题
来自于 1970-01-01 08:00:00
0
0
0
视频不显示,求助!
来自于 1970-01-01 08:00:00
0
0
0
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板