欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

float学习笔记_html/css_WEB-ITnose

程序员文章站 2022-05-20 14:07:32
...

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*)

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

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

浮动与流体布局

???高端的

float

display: inline-block

相关标签: float学习笔记