首页 > 代码库 > CSS:浮动

CSS:浮动

实际开发中:我们想要看到的效果是:

技术分享

然而结果是:

技术分享

这个时候,我们就要清除浮动带来的影响——父元素高度塌陷了。

清除浮动的办法有:

方法一:添加新的div,clear:both;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .father{border:1px solid black; padding:10px 10px;}
    .div1{width:100px; height:100px;background-color:#F00; float:left}
    .div2{width:100px; height:100px;background-color:#0F0; float:left}
    .div3{width:100px; height:100px;background-color:#00F; float:left}
    .clear{
      clear:both;
    }
  </style>
</head>
<body>
  <div class="father over-flow">
    <div class="div1"></div> 
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="clear"></div>
  </div>
</body> 
</html>

 

方法二:父级div定义 overflow: auto(注意:是父级div也就是这里的 div.outer)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .father{border:1px solid black; padding:10px 10px;}
    .div1{width:100px; height:100px;background-color:#F00; float:left}
    .div2{width:100px; height:100px;background-color:#0F0; float:left}
    .div3{width:100px; height:100px;background-color:#00F; float:left}
    .over-flow{
      overflow:auto;//高度自适应
    zoom
:1;//处理兼容性问题(IE6),不符合W3C标准 } </style> </head> <body> <div class="father over-flow"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </div> </body> </html>

 

方法三:方法 :after 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .father{border:1px solid black; padding:10px 10px;}
    .div1{width:100px; height:100px;background-color:#F00; float:left}
    .div2{width:100px; height:100px;background-color:#0F0; float:left}
    .div3{width:100px; height:100px;background-color:#00F; float:left}
    .clearfix:after {
      content:‘‘;display:block;//对于FF/chrome/opera/IE8不能缺少   
      clear:both;
      visibility:hidden;//允许浏览器渲染它,但是不显示出来,这样才能实现清楚浮动。
      zoom:1;
    }
  </style>
</head>
<body>
  <div class="father clearfix">
    <div class="div1"></div> 
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="clear"></div>
   
  </div>
</body> 
</html>

原理:它就是利用:after和:before来在元素内部插入两个元素块,从而达到清除浮动的效果。

CSS:浮动