Css display 和 float

CSS display和浮动

先了解块级元素和行内元素

1.块级元素：独占一行，其余元素只能另起一行，元素宽高，行高和边距都能设定

常用的有<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

2.行内元素：可以与其余元素共占一行，元素宽高，边距不可设定，元素的宽度就是它包含的文字、图片的宽度

常见的行内元素有 <a>、<b>、<label>、<span>、<img>、<em>、<strong>、<i>、<input> 等

二者转换

     display:inline将块级元素设为行级元素

 　display:block将行级元素设为块级元素

     display:inline-block 拥有块元素的属性，并可以一行

　 display:none 去除所有，即消失，但页面代码仍存在 

浮动

float ，使元素浮动，页面改变时，元素会浮动，会出现边框塌陷问题

清除浮动:

 clear:both 两侧都不允许有浮动

clear:right  右侧不允许有浮动元素

二者都可以实现页面重新布局，但建议使用float，