什么是漂浮？如果元素设置为float:left或float:right，它将相应地浮动到其父元素的左侧或右侧。浮动元素的特点是完全脱离标准流（off-label），不再占据标准流中的位置。浮动元素的宽度和高度被内容扩展。设置浮动后，浮动元素会移动到父元素的左边或右边。默认情况下，浮动元素不会向左或向右移出父元素。浮动时，不会超出前面的其他浮动元素。如果浮动元素的顶部是没有浮动的块级元素，则浮动元素不能向上移动。一般来说，浮动元素只能覆盖标准流程中的块级元素。文本、图像和内联块等其他元素会将这些元素放在一边。为什么需要清除浮动？根据浮动元素的特点，浮动元素落伍了，在标准流程中不再占据位置。因此，如果父元素没有设置高度，则浮动元素无法支撑其父元素的高度，其父元素的兄弟块级元素（不浮动）的位置会自动上移。浮动元素对标准流程中其他元素的布局影响较大，造成页面布局混乱，因此必须清除浮动的影响。有几种方法可以清除浮动。父元素定义高度。父元素启用BFC(BlockFormattingContext)块格式化上下文。设置overflow:hidden（只要不可见）父元素设置display:table其他任何可以打开父元素BFC的方法都可以附加标签方法：在末尾添加空的div标签或其他块级标签clear:both单伪元素清除方法.clearfix::after{content:'';显示：块；清除：两者；}.clearfix{\*zoom:1;/\*IE/7/6\*/}双伪元素清除方法.clearfix::before,.clearfix::after{content:'';显示：表格；}.clearfix::after{clear:both;}.clearfix{\*zoom:1;/\*IE/7/6\*/}注意点：*单伪类或者双伪类是比较好的清除浮动的方法，推荐使用*单伪类classes和double伪类的清浮点原理是一样的，只是单伪类只能清浮点，而double伪类不仅可以清浮点，还可以解决margincollapse的问题垂直方向的父子元素。单个伪元素clearfloats清除浮动的原理，即清除浮动元素对其周围元素（浮动元素的兄弟元素）的影响，即使浮动元素是off-label，他的兄弟元素在标签中的位置标准流程不会受到影响。标签方式也是一样，extra标签方式的缺点：extra标签就是在html结构中多创建一个空的div标签。该标签除了清除浮动元素外没有其他作用。它在html结构中显得多余。浮动元素下方的兄弟元素位置上移，在浏览器中属于样式部分，使用html结构来处理样式问题，html结构和css样式并没有完全分开。将这个类添加到它的父元素中以\*//\*在父元素的内容区域后面创建一个元素，相当于extra标签方法中的冗余标签\*/.clearfix::after{/\*使用伪元素创建元素必须添加内容：'';内容也可以为空\*/content:'';/\*使用伪元素创建的元素默认是行内元素，需要转换为块级元素\*/display:block;/\*清除浮动键码\*/clear:both;}/\*兼容IE6/IE7\*/.clearfix{\*zoom:1;/\*IE/7/6\*/}伪元素清除方式解决了extra标签方式的不足。通过伪元素创建的元素不会出现在html结构中，不会使html结构显得多余。使用css手段完全解决了浮动的影响。实现html结构和css样式的完全分离。单伪元素清除方法和双伪元素清除方法的区别。单伪元素只能清除浮动，双伪元素不仅可以清除浮动，还可以解决margincollapse的问题。保证金崩盘是什么？对于垂直相邻的块级元素，兄弟元素之间会存在marginconsolidation的问题，父子元素之间会存在margincollapse的问题。也就是说，如果给子元素设置margin-top，那么父元素会同时跟在子元素后面。下移的解决方法：让父子元素的上外边距不相邻。设置父元素的上边框和父元素的上内边距。在HTML结构中的父元素和子元素之间添加一个表格标记。开启父元素的BFC，并在父元素上设置overflow。：隐;父元素集显示：table；将父元素或子元素转换为内联block和double伪元素利用父子元素的margin不相邻的原理来解决margincollapse的问题代码分析：/\*在父元素的内容区域前面创建一个元素，它相当于父元素和子元素的上边距用\*/.clearfix::before,/\*在父元素的内容区域后面创建一个元素\*/.clearfix::after{/\*使用伪元素时，必须写content\*/content:'';/\*，将元素转换成表格，使创建的元素具有表格的属性\*/display:table;}/\*清除浮动唯一代码，所以单独写\*/.clearfix::after{clear:both;}/\*兼容IE6/IE7\*/.clearfix{\*zoom:1;/\*IE/7/6\*/}display:table和display:block的区别有时候我们会看到这样的代码.clearfix::before,.clearfix::after{content:'.';显示：块；高度：0；行高：0；字体大小：0；溢出：隐藏；}.clearfix::after{clear:both;}.clearfix{\*zoom:1;/\*IE/7/6\*/}代码的不同是display属性的取值不同造成的，这些不同是为了解决margincollapse的问题，使用display:blockordisplay;表以清除浮动。当显示为表格时，将创建一个独立的渲染区域（打开BFC）。无论content属性中的内容是否为空，都会显示该区域分隔父子元素的上外边距。（注意：如果父元素设置为display:table，会打开父元素的BFC；而伪元素的方法是在父元素的内容区域前面创建一个元素，用来分隔上层marginofparentelementfromthechildelement)当display为block时，如果content属性中的内容为空，则父元素和子元素的上margin不能分开，因为display:block不能启用BFC，所以content属性中的内容必须有一个值来分隔父元素和子元素的上外边距，而这个值不是我们需要的，而且还会影响页面的布局，所以才会有高度：0;行高：0；字体大小：0；溢出：隐藏；隐藏文字不会对页面布局有影响，display:table中不需要这些代码。
