为什么要清除浮动？
清除浮动的方法（最常用的4种）
一、 额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签 。
优点： 通俗易懂，书写方便。（不推荐使用）
缺点： 添加许多无意义的标签，结构化比较差。
给元素small清除浮动（在small后添加一个空白标签clear(类名可以随意），设置clear:both;即可）
<div class="fahter"> <div class="big">big</div> <div class="small">small</div> <div class="clear">额外标签法</div> </div> .clear{
clear:both; } 二、 父级添加overflow方法： 可以通过触发BFC的方式，实现清楚浮动效果。必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点： 简单、代码少、浏览器支持好
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。不能和position配合使用，因为超出的尺寸的会被隐藏。
.fahter{
width: 400px; border: 1px solid deeppink; overflow: hidden; } 注意： 别加错位置，是给父亲加（并不是所有的浮动都需要清除，谁影响布局，才清除谁。）
三、使用after伪元素清除浮动： :after方式为空元素的升级版，好处是不用单独加标签了。IE8以上和非IE浏览器才支持:after，，zoom(IE专有属性)可解决ie6,ie7浮动问题（较常用推荐）
优点： 符合闭合浮动思想，结构语义化正确，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点： 由于IE6-7不支持：after，使用zoom：1
.clearfix:after{
/*伪元素是行内元素 正常浏览器清除浮动方法*/ content: ""; display: block; height: 0; clear:both; visibility: hidden; } .clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/ }
"father clearfix">
"big">big
"small">small
"footer">
四、使用before和after双伪元素清除浮动：（较常用推荐）
{
border: 1px solid black; *zoom: 1; } .clearfix:after,.clearfix:before{
content: ""; display: block; clear: both; } .big ,.small{
width: 200px; height: 200px; float: left; } .big{
background-color: red; } .small{
background-color: blue; }
"father clearfix">
"big">big
"small">small
"footer">
优点： 代码更简洁
补充
父级div定义 height： 父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点： 简单、代码少、容易掌握
缺点： 只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/220500.html原文链接：https://javaforall.net
