CSS的浮动以及清楚浮动的方法

来源：互联网发布：淘宝自动提货机器人编辑：程序博客网时间：2024/06/11 21:55

1、CSS中的浮动

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动的元素会脱离文档流，所以文档普通流中的块框表现得就像浮动框不存在一样。

2、浮动带来的副作用

块状元素，会钻进浮动元素的下面，被浮动元素所覆盖；
行内元素，例如文字，则会环绕在浮动元素的周围，为浮动元素留出空间；
浮动元素的父元素坍缩；

如果不希望出现以上这些效果，就需要清除浮动来解决后患，使后面的元素表现的跟浮动前一样，这样既实现了元素浮动，又实现了后来的元素不会受其影响产生不必要的麻烦。

3、清楚浮动（八种）

（1）父级div定义 height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题；

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

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题；
建议：不推荐使用，只建议高度固定的布局时使用。

代码：

<!DOCTYPE HTML><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <title>清楚浮动：父级div定义height</title>    <style type="text/css">       .div1{          background-color: #762564;          border:1px solid #ccc;          color: #fff;          /*清除浮动代码*/          height: 200px;       }       .div2{          background-color: #656532;          border:1px solid #ddd;          height: 100px;          margin-top: 10px;          color: #fff;       }       .left{          float: left;          width: 20%;          height: 200px;          background: red;       }       .right{          float: right;          width: 30%;          height: 80px;          background: green;       }    </style></head><body>   <div class="div1">      <div class="left">Left</div>      <div class="right">Right</div>   </div>   <div class="div2">div2</div></body></html>

（2）结尾处加空div标签，clear：both

原理：添加一个空div，利用css提供的clear:both清除浮动，让父级div能自动获取到高度；
优点：简单、代码少、浏览器支持好、不容易出现怪问题；

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好；

建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法。

代码：

<!DOCTYPE HTML><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <title>结尾处加空div标签clear both </title>    <style type="text/css">       .div1{          background-color: #762564;          border:1px solid #ccc;          color: #fff;       }       .div2{          background-color: #656532;          border:1px solid #ddd;          height: 100px;          margin-top: 10px;          color: #fff;       }       .left{          float: left;          width: 20%;          height: 200px;          background: red;       }       .right{          float: right;          width: 30%;          height: 80px;          background: green;       }       /*清楚浮动代码*/       .clearfloat{          clear:both;       }    </style></head><body>   <div class="div1">      <div class="left">Left</div>      <div class="right">Right</div>      <div class="clearfloat"></div>    <!--结尾处加空标签-->   </div>   <div class="div2">div2</div></body></html>

（3）父级div定义，伪类:after 和 zoom

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE专有属性)可解决ie6,ie7浮动问题；

优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）；

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

建议：推荐使用，建议定义公共类，以减少CSS代码。
代码：

<!DOCTYPE HTML><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <title>结尾处加空div标签clear both </title>    <style type="text/css">       .div1{          background-color: #762564;          border:1px solid #ccc;          color: #fff;       }       .div2{          background-color: #656532;          border:1px solid #ddd;          height: 100px;          margin-top: 10px;          color: #fff;       }       .left{          float: left;          width: 20%;          height: 200px;          background: red;       }       .right{          float: right;          width: 30%;          height: 80px;          background: green;       }       /*清除浮动代码*/       .clearfloat:after{          display: block;          clear: both;          content: "";          visibility: hidden;          height: 0;       }       .clearfloat{          zoom: 1;       }    </style></head><body>   <div class="div1 clearfloat">      <div class="left">Left</div>      <div class="right">Right</div>   </div>   <div class="div2">div2</div></body></html>

（4）父级div定义，overflow：hidden

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度；

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

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

建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

代码：

<!DOCTYPE HTML><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <title>父级div定义 overflow:hidden</title>    <style type="text/css">       .div1{          background-color: #762564;          border:1px solid #ccc;          color: #fff;          /*清除浮动代码*/          width: 100%;          overflow: hidden;       }       .div2{          background-color: #656532;          border:1px solid #ddd;          height: 100px;          margin-top: 10px;          color: #fff;       }       .left{          float: left;          width: 20%;          height: 200px;          background: red;       }       .right{          float: right;          width: 30%;          height: 80px;          background: green;       }           </style></head><body>   <div class="div1 clearfloat">      <div class="left">Left</div>      <div class="right">Right</div>   </div>   <div class="div2">div2</div></body></html>

（5）父级div定义 overflow:auto

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度；

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

缺点：内部宽高超过父级div时，会出现滚动条；

建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
代码：

<!DOCTYPE HTML><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <title>父级div定义 overflow:auto</title>    <style type="text/css">       .div1{          background-color: #762564;          border:1px solid #ccc;          color: #fff;          /*清除浮动代码*/          width: 98%;          overflow: auto;       }       .div2{          background-color: #656532;          border:1px solid #ddd;          height: 100px;          margin-top: 10px;          color: #fff;       }       .left{          float: left;          width: 20%;          height: 200px;          background: red;       }       .right{          float: right;          width: 30%;          height: 80px;          background: green;       }           </style></head><body>   <div class="div1 clearfloat">      <div class="left">Left</div>      <div class="right">Right</div>   </div>   <div class="div2">div2</div></body></html>

接下来的三种方法只做了解即可~

（6）父级div也一起浮动

原理：所有代码一起浮动，就变成了一个整体；

优点：没有优点；

缺点：会产生新的浮动问题；

建议：不推荐使用，只作了解。

代码：

<!DOCTYPE HTML><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <title>父级div也一起浮动</title>    <style type="text/css">       .div1{          background-color: #762564;          border:1px solid #ccc;          color: #fff;          /*清除浮动代码*/          width: 100%;          float: left;       }       .div2{          background-color: #656532;          border:1px solid #ddd;          height: 100px;          margin-top: 10px;          color: #fff;          /*清除浮动代码*/          clear: both;       }       .left{          float: left;          width: 20%;          height: 200px;          background: red;       }       .right{          float: right;          width: 30%;          height: 80px;          background: green;       }    </style></head><body>   <div class="div1">      <div class="left">Left</div>      <div class="right">Right</div>   </div>   <div class="div2">div2</div></body></html>

（7）父级div定义 display:table

原理：将div属性变成表格；

优点：没有优点；

缺点：会产生新的未知问题；

建议：不推荐使用，只作了解。

代码：

<!DOCTYPE HTML><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <title>父级div定义 diaplay:table</title>    <style type="text/css">       .div1{          background-color: #762564;          border:1px solid #ccc;          color: #fff;          /*清除浮动代码*/           width: 100%;           display: table;       }       .div2{          background-color: #656532;          border:1px solid #ddd;          height: 100px;          margin-top: 10px;          color: #fff;       }       .left{          float: left;          width: 20%;          height: 200px;          background: red;       }       .right{          float: right;          width: 30%;          height: 80px;          background: green;       }    </style></head><body>   <div class="div1">      <div class="left">Left</div>      <div class="right">Right</div>   </div>   <div class="div2">div2</div></body></html>

（8）结尾处加 br标签 clear:both

原理：父级div定义zoom:1来解决IE浮动问题，结尾处加 br标签 clear:both ；

建议：不推荐使用，只作了解。

代码：

<!DOCTYPE HTML><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <title>父级div定义 diaplay:table</title>    <style type="text/css">       .div1{          background-color: #762564;          border:1px solid #ccc;          color: #fff;          /*清除浮动代码*/          zoom:1;       }       .div2{          background-color: #656532;          border:1px solid #ddd;          height: 100px;          margin-top: 10px;          color: #fff;       }       .left{          float: left;          width: 20%;          height: 200px;          background: red;       }       .right{          float: right;          width: 30%;          height: 80px;          background: green;       }       .clearfloat{          clear: both;       }    </style></head><body>   <div class="div1">      <div class="left">Left</div>      <div class="right">Right</div>      <br class="clearfloat" />    <!--结尾处加br标签-->   </div>   <div class="div2">div2</div></body></html>

参考文章：http://www.jb51.net/css/173023.html

阅读全文

0 0