区块元素在同一行显示与清除浮动

怎样让区块元素在同一行显示？有两种办法：

1. 设置区块元素的display为inline-block
2. 设置浮动

对display：inline-block的理解：

1）inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，但是会解析换行符，允许空格，同时可以设置宽度和高度属性。

2）IE8不兼容该方法，修改方法为：

先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display要先后放在两个CSS声明中才有效果），代码：

div {display:inline-block;...} 
div {display:inline;}

3）使用该方法会使两个元素之间产生间隔，怎样去除inline-block两个元素之间的间隔呢？有以下方法

a. 将margin设为负值；

b. 将两个标签的空格（换行）删掉或用<!--   -->注释掉；

c. 将父元素字体大小设为0，在子元素上重新设置字体大小；（较推荐）

   d. 父元素设置letter-spacing为负值，子元素letter-spacing为0；

   e. 父元素设置word-spacing为负值，子元素word-spacing为0；

关于浮动（float：left/right/none）：

1. 浮动会使元素脱离文档流，遇到父级边界或者同级浮动元素时停住，会使父元素高度崩塌
2. 清除浮动的几种方法：

1. 给父元素设置高度（不推荐）

优点：简单、代码少、容易掌握 

缺点：高度有时候是未知的。当浏览器宽度变化时，元素会换行，需要重新定义高度

1. 给父元素设置overflow：hidden/scroll/auto（不推荐）

优点：简单、代码少、浏览器支持好 

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

1. 给浮动元素后加一个空标签，样式style=“clear : both ;”（不推荐）

      优点：简单、代码少、浏览器支持好、不容易出现怪问题 

缺点：会增加一个毫无意义的空标签

 

1. .clearfix:before,.clearfix:after{display:block;content:"";}
   .clearfix:after{clear:both;}
   .clearfix{*zoom:1}（兼容ie 触发haslayout）（推荐）

      并给浮动元素的父元素添加clearfix类

优点：浏览器支持好、不容易出现怪问题

缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持

1. 给浮动元素的父元素设置overflow：auto（不推荐，仅了解）

优点：简单、代码少、浏览器支持好 
缺点：内部宽高超过父级div时，会出现滚动条。 

1. 给父元素也设置浮动（不推荐）

    没有优点，会带来新的浮动问题

1. 给父元素添加display : table属性（不推荐）

将父元素div变为表格，没有优点，会带来一些未知的问题

1. 给浮动元素后添加标签<br style="clear:both"/>（不推荐）

父子级元素包含的时候子级的margin-top会传递给父级

 解决办法 ：  1.给父级添加border;
          2.父级使用overflow:hidden;
           3.不要使用margin-top 给父级用padding-top