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

最新推荐文章于 2024-09-05 04:25:37 发布
转载 最新推荐文章于 2024-09-05 04:25:37 发布 · 711 阅读 · 0
收录于
CSS

当前文章被收录于：

CSS
3 篇文章 0 人学习
订阅专栏 查看详情
本文介绍了CSS中浮动的概念及其带来的副作用，并详细阐述了八种清除浮动的方法，包括定义height、使用clear:both、伪类:after与zoom等。

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

TI单芯片毫米波雷达1642代码走读（〇）——总纲
11-06 3万+
前言 近年来，自动驾驶行业发展如火如荼，雷达技术也逐渐从军工封闭圈走向了开放的市场。 毫米波雷达具有全天候探测能力，特别是在雨雪雾天气以及夜间都能可靠工作，并且探测距离相对其他车载传感器非常远，对运动目标非常敏感，价格还低廉，这些特性都使其成为自动驾驶感知层面不可或缺的一环。 现如今的雷达已经不仅仅局限于测距测速测角等传统的功能，雷达技术正在从感知走向认知、从宽带走向超宽带、从二维走向三维四维、从相控阵走向数字阵列、从单通道走向MIMO、从独立工作走向分布式协同、从分立组件走向射频数字一体化。MIMO
PCL 欧式聚类分割【2026最新版】
热门推荐
点云侠的博客
07-25 40万+
PCL中欧式聚类提取算法原理详解、代码实现以及一个大自然场景地物分割提取并保存分割结果到本地文件夹的应用案例。
CSS 浮动
m0_52861684的博客
08-28 5637
CSS浮动。
IEC 62271-213-2021 高压开关设备和控制设备第213部分：电压检测和指示系统.pdf
IEC 62271-213-2021 高压开关设备和控制设备第213部分：电压检测和指示系统.pdf
css的浮动详解
m0_56713342的博客
10-18 2425
浮动 ：就是使用float样式，使元素脱离文档流可选值：none 默认值，不设置浮动left 向左浮动right 向右浮动一般情况下，我们是不给父元素设置高度的， 让其内部的子元素自动撑开父元素的高度， 这样父元素的高度就可以随着子元素高度的变化而变化 ,.然而子元素若设置浮动，就会脱离文档流，也就撑不开父元素的高度从而导致父元素的高度丢失，影响整个页面布局，这就叫高度塌陷。
CSS-浮动【看这一篇就够了】
zheshiyangyang的博客
08-31 2587
:after。
CSS基础总结（四）浮动
人生处处是围城，一切都是最好的安排！
12-18 2020
CSS页面布局核心知识之浮动、清除浮动的负面影响、浮动和标准流混合布局、网页的常见布局方式
CSS清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法
sinat_36533893的博客
04-08 7076
CSS清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法  浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局； 恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下无特殊说明均指 windows 平台的 IE浏览器）。也许很多人都有这样的疑问，浮动从何而来？我们为何要清除浮动？清除浮动的原理是什么？本文将一步一步地深入剖析其中的奥秘，让浮动使用
CSS的浮动及清除浮动的5种方法
web前端开发
11-13 5037
浮动是布局的时用到的一种技术，能够方便我们进行布局。1、浮动的设置：css属性float：left/right/none 左浮动/右浮动/不浮动（默认）2、浮动的原理：使...
Css清除浮动常用方法
LUOandHUANG的博客
06-21 4051
1、为什么要浮动 首先我们要知道为什么要给元素设置浮动。HTML中标签分为：块级标签，行内标签，行内块标签。其中块级标签和行内块标签以及行内标签的排列方式是不一样的，块级标签是独占一行的，而行内块元素和行内元素是在同一行内排列的，只有当排满或者容不下元素时才会另起一行显示。因此想要块级元素在同一行内显示，或者想要设置元素浮动对齐的方式就需要将元素浮动起来。css中float属性用来设置元素的浮动，...
6.2 CSS清除浮动的方法
最新发布
Python老吕的博客
09-05 979
与 Flexbox 一样，Grid 布局提供了一种更为现代和强大的方法来处理布局，它可以自动处理子元素的位置，包括那些可能被设置为浮动的元素。在CSS布局中，浮动元素可能会导致父元素的高度塌陷，因为浮动元素不在文档流中，父元素无法正确计算其高度。布局，即弹性布局，是CSS3引入的一种更加高效和强大的布局模式。这样，即使父元素内部有浮动元素，父元素也能够正确地包裹所有子元素，包括非浮动的子元素。假设你有一个包含两个浮动元素的容器，你希望容器能够正确显示这两个元素，即使它们的高度超出了容器的初始高度。
CSS篇之2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法
zengyonglan的博客
11-23 1万+
2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法 ？ 一.什么时候需要清除浮动？我们对元素进行了浮动(float)时，我们的元素就会脱离文档流，像一只小船一样漂流在文档之上。 在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 float主要流行与页面布局，然后没有使用后没有清除浮动，就会后患无穷。知乎上截图： 分析HTML代码结构：<div
CSS之浮动布局（float，浮动原理，清除/闭合浮动方法）
qq_47443027的博客
04-22 2371
1.什么是浮动：在我们布局的时用到的一种技术，能够方便我们进行布局，通过让元素浮动，我们可以使元素在水平上左右移动，再通过margin属性调整位置 2.浮动的原理：使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘 3.浮动的生成：使用css属性float：left/right/none 左浮动/右浮动/不浮动（默认） 4.浮动的影响： 对附近的元素布局造成改变，使得布局混乱 浮动后的元素可以设置宽度和高度等，也就是说元素浮动后会变成块级
css清除浮动的方法
study_way的博客
10-10 237
浮动导致的后果： （1）由于浮动元素脱离了文档流，所以父元素的高度无法被撑开，影响了与父元素同级的元素 （2）与浮动元素同级的非浮动元素会跟随其后，因为浮动元素脱离文档流不占据原来的位置 （3）如果该浮动元素不是第一个浮动元素，则该元素之前的元素也需要浮动，否则容易影响页面的结构显示 我们要知道：浮动的框可以左右移动，直到遇到另一个浮动框或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。 我们来写一个例子来看一下，创建一个父级div，然后下
css中清浮动的方法,详细解读css中的浮动以及清除浮动的方法
weixin_35899510的博客
08-03 862
对于前端初学者来说，css浮动部分的知识是一块比较难以理解的部分，下面我将把我学习过程中的心得分享给大家。导读：1.css块级元素讲解2.css中浮动是如何产生的3.出现浮动后，如何清除浮动(本文将涉及到多种清除浮动的方法)博客正文：1.css块级元素讲解常见的块级元素主要有以下几种：、、...、、、、、、 、、、。css中块级元素的特点：块级元素可以设置宽高，如果不设置的话，默认为父容器的宽高；...
css3 清楚浮动,CSS3清除浮动6种方法集合
weixin_30094815的博客
08-04 451
一、浮动产生原因一般浮动是什么情况呢？一般是一个盒子里使用了CSS float浮动属性，导致父级对象盒子不能被撑开，这样CSS float浮动就产生了。本来两个黑色对象盒子是在红色盒子内，因为对两个黑色盒子使用了float浮动，所以两个黑色盒子产生了浮动，导致红色盒子不能撑开，这样浮动就产生了。简单地说，浮动是因为使用了float:left或float:right或两者都是有了而产生的浮动。二、浮...
【css】css清除浮动的三种方法
TTong_190502的博客
07-31 698
清除浮动的三种方法，CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素，使用了浮动的元素会造成父元素高度塌陷、会使紧随其后的行内元素围绕排列、会使紧随其后的块状元素被覆盖，所以为了避免以上情况，只要元素使用了浮动，就必须要清除浮动。
CSS 浮动和清除浮动方法总结
WangMin@汪末末
09-17 704
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 什么是浮动 float？ 标准流：盒子会各占整行位置。子盒子若是标准流，父盒子虽然没有高度，但是会撑开父盒子高度。 浮动：盒子浮了起来，不会占据原来的位置，若父盒子没有定义高度，则不会撑开父盒子，父盒 子高度为0。（浮动可以让多个块级元素在一行显示，且块与块之间没有空隙，但要注意给父盒子清除浮动，否则父盒子不会被撑开）。 div配合float浮动来做页面的布局，浮动最常用的地方就是用来做布局。只要
css清除浮动无效,css清除浮动的处理方法
weixin_36300623的博客
08-03 1690
根据《精彩绝伦的css》JS Bin.news{outline:1px solid pink}.col{float: left;width:33%;outline:1px solid blue;}some text-oneConHugeCo has permanently altered the theory of niches. What do we morph? Anything and ev...
CSS——清除浮动所有方法总结
z17853913976的博客
12-05 1934
为什么要清除浮动？ 一开始css的浮动，其本质是用来做一些文字混排效果的，但是后来被我们拿来做布局用，就出现了很多问题。 清除浮动的本质：为解决父级元素因为子级浮动引起高度为0的问题 我们很多时候不方便给父盒子的高度，因为我们不清除有多少子盒子，有多少内容。经常的做法会让内容撑开父盒子的高度。 但是如果父盒子中有子盒子浮动了之后，就会影响到后面的盒子，因为浮动元素脱离了标准流。会把后面还在标准流的盒子覆盖，解决这个问题的方法就要清除浮动 如何清除浮动？ 清除浮动其实叫做 闭合浮动 更合适，因为是把浮动的
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值