首页 > 代码库 > CSS：浮动

CSS：浮动

2024-09-11 00:49:31   262人阅读

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

技术分享

然而结果是：

技术分享

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

清除浮动的办法有：

方法一：添加新的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：浮动


联系
我们