浮动
display属性
display常用属性值:
block:块级元素默认
none:元素不会被显示
inline:行内元素的默认值
inline-block:行内元素
浮动的使用
语法:选择器{float:属性值 ;}
属性值:
left:元素向左移动
right:元素向右移动
none:默认值,不浮动
清除浮动
clear
语法:选择器{ clear:属性值;}
lelf:在左侧均不允许浮动元素
right:在右侧均不允许浮动元素
both:在左右侧均不允许浮动元素
none:默认值,允许两端出现浮动元素
清除浮动的其他方法
div 清除浮动 的四种 方式 清除浮动 主要是为了解决父元素因为子级 浮动 引起高度为 0 的问题。 简单来说给父元素加一个高度也能解决这个问题,但是很多情况下不方便给父元素高度。 所以,一般情况下,应该让子元素内容自动撑开父元素,不要写死父元素的高度。 clear 属性用于 清除浮动 ,以下是 清除浮动 的几种常见 方式 。 1. 额外标签法 在 浮动 元素后面添加一个新的空 div,这个空 div 的样式添加 cl… 浮动 (float),一个我们即爱又恨的属性。 爱,因为通过 浮动 ,我们能很方便地布局; 恨, 浮动 之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器)
inline-block和浮动的区别
虽然设置浮动跟设置inline-block有些特征类似,但两者的 区别 还是非常明显的: 文档流(Document flow) :浮动元素会脱离文档流,并使得周围元素 环绕这个元素 。. 而inline-block元素仍在文档流内。. 因此设置inline-block不需要清除浮动。. 当然,周围元素不会环绕这个元素,你也不可能通过清除inline-block就让一个元素跑到下面去。. 水平位置(Horizontal position) :很明显你不能通过给父元素设置text-align:center让浮动元素居中。. 事实上定位类属性设置到父元素上,均不会影响父元素内浮动的元素。