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

最新推荐文章于 2024-07-09 09:39:15 发布
最新推荐文章于 2024-07-09 09:39:15 发布
阅读量589 收藏
点赞数 1
分类专栏： CSS

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

Maizi93
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS清除浮动常用方法小结
10-30
使用div+css（姑且这样叫，虽然我也不喜欢，但是叫什么呢？）布局的好处不用多说，经常性地会使用到float，那么清除浮动就是必须要做的，而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一。
CSS 浮动
m0_52861684的博客
08-28 5148
CSS浮动。
CSS系列之浮动详解
老__L的博客
02-02 5728
本文主要介绍CSS的clear属性。元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制。移动到指定位置。
CSS上下悬浮特效
最新发布
m0_56164131的博客
07-09 903
要实现一个上下悬浮的特效，可以使用CSS的@keyframes规则和动画属性。
css的浮动详解
m0_56713342的博客
10-18 1768
浮动 ：就是使用float样式，使元素脱离文档流可选值：none 默认值，不设置浮动left 向左浮动right 向右浮动一般情况下，我们是不给父元素设置高度的， 让其内部的子元素自动撑开父元素的高度， 这样父元素的高度就可以随着子元素高度的变化而变化 ,.然而子元素若设置浮动，就会脱离文档流，也就撑不开父元素的高度从而导致父元素的高度丢失，影响整个页面布局，这就叫高度塌陷。
CSS基础总结（四）浮动
人生处处是围城，一切都是最好的安排！
12-18 1802
CSS页面布局核心知识之浮动、清除浮动的负面影响、浮动和标准流混合布局、网页的常见布局方式
CSS清除浮动方法小结
09-24
在CSS布局中，浮动元素（float）经常用于创建多列布局，但它们会带来一个问题，即父元素可能无法正确地包含其浮动子元素，导致高度塌陷。为了解决这个问题，有多种清除浮动的方法，本文将详细介绍四种常见的清除浮动...
CSS清除浮动方法汇总
10-20
本文将汇总一些常见的CSS清除浮动的方法。 1. **传统clear属性** CSS的`clear`属性用于指定元素是否可以放在浮动元素的旁边。如果设置为`clear:left`，则元素不会出现在左侧有浮动元素的地方；`clear:right`不让...
CSS3 清除浮动的方法示例
09-24
【清除浮动的原理和方法】 在CSS布局中，浮动元素（通常使用`float: left`或`float: right`）可以使得元素脱离正常文档流，从而实现如图文环绕的效果或者创建多列布局。然而，这种脱离正常文档流的行为可能会导致...
css 清除浮动的新方法
09-25
传统的清除浮动方法是添加一个空的div元素，并通过设置其CSS样式来达到清除浮动的目的，如设置其clear属性为both，然后通过设置height属性为0或高度超出隐藏，这样可以确保父元素能够包裹浮动元素并防止布局塌陷。...
CSS系列之浮动
StayAlive1887的博客
07-29 507
浮动的由来：块级元素在一行显示，可以使用属性：display: inline-block；浏览器在解析行内块或行内标签的时候，如果标签换行书写会产生一定的距离。两个div转成 inline-block 的时候，可以并排显示，但会有一定的距离，这个距离是因为写div标签的时候换行写了。
超详细的学习笔记：CSS浮动（附代码示例）
lbcbjtlhmjq的博客
07-13 1047
一、结构伪类选择器 二、伪元素 三、标准流 四、浮动 五、清除浮动 六、CSS书写顺序 七、代码示例
【web前端开发】CSS浮动
云泽野の编程日记
03-27 1072
这里的清除浮动并不是把浮动的代码给清除了,而是其它元素会受到浮动的影响,我们不想让其它元素受到浮动的影响,因此我们需要清除浮动。但是蓝色的div盒子并没有把灰色div盒子的内容遮盖掉,虽然是脱标,但算是一种半脱标.可以看到第二个跑到了第一个div的位置,就这就是浮动的脱标现象,相当于是飞起来了.蓝色的div已经脱标了.因此绿色的div就跑到上面去了.这就是受到了浮动的影响。如果我想要的是绿色的盒子就在蓝色的盒子下面这个位置显示。这是不加浮动的显示效果,下面看看加了浮动的。
利用HTML+CSS进行页面布局（div的浮动效果）
热门推荐
飞奔的嗨少
10-28 2万+
什么叫做浮动？？（利用一系列图片来解释什么叫浮动） 我们利用float:left;进行div浮动时，会有一个立体的抽象浮动过程，浮动的div会上向左移，而跟在下面的div会占据第一个div的位置，这个过程就叫做浮动。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t...
浮动的特点
m0_70552412的博客
06-01 756
块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开， 如果希望块元素在页面中水平排列，可以使块元素脱离文档流 使用float来使元素浮动，使一个元素向其父元素的左侧或右侧移动，从而脱离文档流 可选值： none，默认值，元素默认在文档流中排列 left，，向页面的左侧浮动 right，向页面的右侧浮动 浮动的特点 1:浮动元素会脱离文
CSS浮动（二）
weixin_50777322的博客
07-11 1207
CSS浮动
【CSS】浮动 ② ( 浮动语法简介 | 文字环绕效果 | 左浮动 | 右浮动 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-22 1883
一、浮动语法简介 1、语法说明 2、没有浮动的效果 3、左浮动的效果 4、右浮动的效果 5、右浮动 + 外边距效果 二、完整代码示例
CSS伪类实现加号
CaseyWei
11-15 927
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
理解CSS浮动：浮动与浮动布局
"CSS浮动：浮动与浮动形状" 在网页设计中，CSS（Cascading Style Sheets）浮动是一种关键的技术，用于布局和控制元素在页面上的位置。本资源是一本由Eric A. Meyer编写的关于CSS浮动的专业书籍，高清且带有书签，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值