浮动

2020-05-15 09:02:35

浮动 1.浮动的定义元素的浮动是指设定浮动之后会相对于自身之前的位置其基本语法格式如下：选择器{float:属性值;} 属性值描述 left 元素向左浮动 right 元素向右浮动 none 元素不浮动（默认值） 2.浮动的特性...

页面布局的主要方式：

文档流：块级元素上下显示，行内块和行内元素左右显示
浮动：脱离正常的文档流，块级元素可以左右显示
定位：定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置

浮动

1.浮动的定义

元素的浮动是指设定浮动之后会相对于自身之前的位置

其基本语法格式如下：

选择器{float:属性值;}

属性值描述

left 元素向左浮动
right 元素向右浮动
none 元素不浮动（默认值）

2.浮动的特性

相当于机械绘图中的图层，底层为html图层，上一层为浮动所在图层，两个图层叠加，但不透明，浮动后底层html会自动重新排列元素
脱离标准流，不占位置，浮动只有左右浮动
目的：为了让多个块级元素可以在一行显示

3.清除浮动

由于浮动元素不占原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就要在该元素中清除浮动

准确来说，不是清除浮动而是清除之前和之后浮动元素对自身造成的影响

在css中，clear属性用于清除浮动，其语法格式为：

选择器{clear:属性值;}

属性值描述

left 不允许左侧有浮动元素（清除左侧浮动的影响）
right 不允许右侧有浮动元素（清除右侧浮动的影响）
both 同时清除左右两侧浮动的影响

4.浮动带来的影响及解决

问题：
由于盒子模型默认父盒子不设宽高，如果盒子内的所有元素都浮动，会造成父盒子没有高度，打乱了后续的所有排列
解决：
1.手动设置父盒子的宽高（不推荐，每次维护都需要设定相应的值）
2 设置溢出隐藏
原理：设置overflow为hidden相当于间接固定了盒子大小，因为只有固定大小才能对多余显示内容进行隐藏，在对父盒子进行固定时相对简单

overflow:hidden

3.在父盒子内最后增加一个空的div，设定这个div清除浮动，以固定该位置来撑开父盒子的高度
4.伪元素设定：设定一个伪元素，内容为空且为块级元素，清除前后浮动影响，撑起父盒子的高度

div ::after{
	display:block;
	content:'';
	clear:both;
}

收起

展开全文

html

浮动以及清除浮动

2021-03-17 19:56:16

浮动以及清除浮动，BFC块状格式化上下文，CSS样式问题

文章目录

浮动

浮动特征

浮动会脱离文档
浮动可以内联排列
浮动会导致父元素高度坍塌

清除浮动

clear清除浮动
BFC清除浮动

BFC的主要特征

BFC的触发方式

浮动

浮动核心就一句话： 浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。

浮动特征

浮动会脱离文档

脱离文档，也就是说浮动不会影响普通元素的布局

在这里插入图片描述

从上图可以看出，默认三个设置了宽高的block元素，本来会格子独占一行；如果框1设置了向左/向右浮动，他会忽略框2和框3，直到碰到父元素；同时也存在盖住普通元素的风险。

浮动可以内联排列

浮动会向左/向右浮动，直到碰到另一个浮动元素为止，这是浮动可以内联排列的特征。也就是说，浮动可以设置宽高，并且能够一行多个，是介于block和inline之间的存在。

在这里插入图片描述

从上图可以看出，对多个元素设置浮动，可以实现类似inline-block的效果；但是如果每个元素的高度不一致，会出现“卡住”的情况。

浮动会导致父元素高度坍塌

浮动会脱离文档流，这个问题对整个页面布局有很大的影响。

// css
 .box-wrapper {
        border: 5px solid red;    
}
  .box-wrapper .box {
        float: left; 
        width: 100px; 
        height: 100px; 
        margin: 20px; 
        background-color: green;    
}

// html
    <div class="box-wrapper">    
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    </div>

结果如下，浮动元素脱离了文档流，并不占据文档流的位置，自然父元素也就不能被撑开，所以没了高度。

在这里插入图片描述

清除浮动

clear清除浮动
BFC清除浮动

clear清除浮动

clear属性不允许被清除浮动的元素的左边/右边挨着浮动元素，
底层原理: 在被清除浮动的元素上边或者下边添加足够的清除空间

注意：我们是通过在别的元素上清除浮动来实现撑开高度的，而不是在浮动元素上。

//clear清除浮动例子
    <div class="box-wrapper">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div style="clear:both;"></div>
    </div>

在这里插入图片描述

不要在浮动元素上清除浮动

//第三个元素加上clear:both
    <div class="box-wrapper">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box" style="clear:both;"></div>
    </div>

在这里插入图片描述

注意：给第三个元素加上clear:both之后，第三个元素的左右都没有挨着浮动元素，但是为什么高度还是坍塌了呢？机智的你可能发现了，由于第三个元素是浮动元素，脱离了文档流，就算给第三个元素上下加了清除空间，也是没有任何意义的。

// 现代浏览器clearfix方案，不支持IE6/7
    .clearfix:after {
        display: table;
        content: " ";
        clear: both;
    }

// 全浏览器通用的clearfix方案
// 引入了zoom以支持IE6/7
    .clearfix:after {
        display: table;
        content: " ";
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }

// 全浏览器通用的clearfix方案【推荐】
// 引入了zoom以支持IE6/7
// 同时加入:before以解决现代浏览器上边距折叠的问题
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: " ";
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }

在这里插入图片描述

BFC清除浮动

BFC全称是块状格式化上下文，它是按照块级盒子布局的。我们了解他的特征、触发方式、常见使用场景这些就够了。

BFC的主要特征

BFC容器是一个隔离的容器，和其他元素互不干扰；所以我们可以用触发两个元素的BFC来解决垂直边距折叠问题。
BFC可以包含浮动；通常用来解决浮动父元素高度坍塌的问题。

BFC的触发方式

我们可以给父元素添加以下属性来触发BFC：

float 为 left | right
overflow 为 hidden | auto | scorll
display 为 table-cell | table-caption | inline-block | flex | inline-flex
position 为 absolute | fixed

所以我们可以给父元素设置overflow:auto来简单的实现BFC清除浮动，但是为了兼容IE最好用overflow:hidden。但是这样元素阴影或下拉菜单会被截断，比较局限。

本文链接:https://blog.csdn.net/qq_39903567/article/details/114946607

收起

展开全文

前端 css BFC

CSS浮动

千次阅读 多人点赞 2020-11-05 22:24:07

CSS浮动浮动的特性float属性三个div都不浮动第一个div浮动第二个div浮动三个div都浮动浮动的父子关系浮动影响父层盒子高度overflow属性溢出处理清除浮动浮动的特性 1.浮动主要用于使得div脱离标准文档流，生成多列...


CSS浮动
浮动的特性
float属性
三个div都不浮动
第一个div浮动
第二个div浮动
三个div都浮动
浮动的父子关系
浮动影响父层盒子高度
overflow属性
溢出处理
清除浮动

浮动的特性

1.浮动主要用于使得div脱离标准文档流，生成多列布局

2.浮动就是让元素可以向左或向右移动，直到它的外边距碰到其父级的内边距或者是上一个元素的外边距(这里指的上一个元素不管它有没有设置浮动，都会紧挨着上一个元素）

3.浮动元素支持所有的css样式 、内容撑开宽高  、多个元素设置浮动，宽度足够的话，会排在一行  、脱离文档流  、提升层级半级（也就是说：一个元素设置了浮动属性后，下一个元素就会无视这个元素的存在，但是下一个元素中的文本内容依然会为这个元素让出位置使自身的文本内容环绕在设置浮动元素的周围）。


注意：不管是行级还是块级元素，如果设置了浮动属性，该元素就变成了具有inline-block属性的元素。

float属性




属性
说明




left
元素向左浮动


right
元素向右浮动


none
默认值，元素不浮动


下面我们用三个div来设置不同情况的div浮动来通过例子来理解float以及overflow。
三个div都不浮动
样例代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.class1 {
				width: 200px;
				height: 100px;
				background: palegreen;
			}


			.class2 {
				width: 250px;
				height: 130px;
				background: gold;
			}


			.class3 {
				width: 300px;
				height: 180px;
				background: red;
			}
		</style>
	</head>
	<body>



		<div class="class1">我是块级元素1，没有设置浮动</div>

		<div class="class2">我是块级元素2，没有设置浮动</div>

		<div class="class3">我是块级元素3，没有设置浮动</div>



	</body>
</html>


效果截图：



在不设置浮动的情况下，三个div块会竖着在一列显示

第一个div浮动
样例代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.class1 {
				width: 200px;
				height: 100px;
				background: palegreen;
				float: left
			}


			.class2 {
				width: 250px;
				height: 130px;
				background: gold;
				
			}


			.class3 {
				width: 300px;
				height: 180px;
				background: red;
				
			}
		</style>
	</head>
	<body>



		<div class="class1">块级元素1，设置浮动</div>
		
		<div class="class2">块级元素2，没有设置浮动，块级元素2，没有设置浮动，块级元素2，没有设置浮动，块级元素2，没有设置浮动</div>

		<div class="class3">块级元素3，没有设置浮动</div>



	</body>
</html>



效果截图：



故意将第二个div块中的内容写得多点，我们可以得出下面的结论：

1.没有设置浮动的元素会填充浮动元素留下来的空间

2.浮动元素会和非浮动元素发生重叠，浮动元素会在图层的最上面

3.使用浮动时，该元素会脱离文档流，后面的元素会无视这个元素，但文本依然会为这个浮动元素让出位置，并且元素中的文字内容会环绕在其周围。

第二个div浮动
样例代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.class1 {
				width: 200px;
				height: 100px;
				background: palegreen;
				
			}


			.class2 {
				width: 250px;
				height: 130px;
				background: gold;
				float: left
			}


			.class3 {
				width: 300px;
				height: 180px;
				background: red;
				
			}
		</style>
	</head>
	<body>



		<div class="class1">块级元素1，没有设置浮动</div>
		
		<div class="class2">块级元素2，设置浮动</div>

		<div class="class3">块级元素3，没有设置浮动</div>



	</body>
</html>


效果截图：



由此我们可以很明显的看出：

浮动元素不会超越其前面的元素

三个div都浮动
样例代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.class1 {
				width: 200px;
				height: 100px;
				background: palegreen;
				float: left
			}


			.class2 {
				width: 250px;
				height: 130px;
				background: gold;
				float: left
			}


			.class3 {
				width: 300px;
				height: 180px;
				background: red;
				float: left
			}
		</style>
	</head>
	<body>



		<div class="class1">块级元素1，设置浮动</div>
		
		<div class="class2">块级元素2，设置浮动</div>

		<div class="class3">块级元素3，设置浮动</div>



	</body>
</html>

效果截图：

浏览器宽度足够时，三个div会并排排列 。



当我们发大页面时，浏览器宽度不足以容纳最后一个div时，最后一个div掉下来，并且顶部不会超过倒数第二个div的底部。


浮动的父子关系
样例代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			#wrap2 {
				width: 55px;
				height: 90px;
				border: 3px solid red;
			}


			.class1 {
				width: 20px;
				height: 40px;
				background: blue;
				float: left;
			}


			.class2 {
				width: 20px;
				height: 30px;
				background: yellow;
				float: left;
			}


			.class3 {
				width: 20px;
				height: 30px;
				background: fuchsia;
				float: left;
			}


			.class4 {
				width: 20px;
				height: 20px;
				background: chartreuse;
				float: left;
			}
		</style>
		<title></title>
	</head>
	<body>
		<div id="wrap2">
			<div class="class1"></div>

			<div class="class2"></div>

			<div class="class3"></div>

			<div class="class4"></div>

		</div>
	</body>
</html>


效果截图：



由此我们可以得到下面的结论：

1.浮动元素不会在其浮动方向上溢出父级的包含块 也就是说元素左浮动，其左外边距不会超过父级的左内边距，元素右浮动，其右外边距不会超过父级的右内边距 。

2.浮动元素的位置受到同级同向浮动元素的影响 也就是说同一父级中有多个浮动元素，后一个元素的位置会受到前一个浮动元素位置的影响，他们不会相互遮挡，后一个浮动元素会紧挨着前一个浮动元素的左外边距进行定位，如果当前空间不足，则会换行，否则会放置在前一个浮动元素的下面。

浮动影响父层盒子高度
样例代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			#wrap2 {
				width: 55px;
				border: 3px solid red;
			}


			.class1 {
				width: 20px;
				height: 40px;
				background: blue;
				float: left;
			}


			.class2 {
				width: 20px;
				height: 30px;
				background: yellow;
				float: left;
			}


			.class3 {
				width: 20px;
				height: 30px;
				background: fuchsia;
				float: left;
			}


			.class4 {
				width: 20px;
				height: 20px;
				background: chartreuse;
				float: left;
			}
		</style>
		<title></title>
	</head>
	<body>
		<div id="wrap2">
			<div class="class1"></div>

			<div class="class2"></div>

			<div class="class3"></div>

			<div class="class4"></div>

		</div>
	</body>
</html>

效果截图：



由此我们可以得到下面的结论：

父元素的高度靠子元素撑开，子元素全部浮动后，均脱离文档流，父元素高度塌陷。

overflow属性




overflow属性
说明




visible
默认值。内容不会被修剪，会呈现在盒子之外


hidden
内容会被修剪，并且其余内容是不可见的


scroll
内容会被修剪，但是浏览器会显示滚动条以便查看其余内容


auto
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容



overflow属性的妙用：

配合着浮动父容器，解决父容器高度他塌陷的问题。

使用overflow扩展盒子高度，overflow属性会触发浏览器重新计算父元素盒子高度。

样例代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			#wrap2 {
				width: 55px;
				border: 3px solid red;
				overflow: hidden;
			}


			.class1 {
				width: 20px;
				height: 40px;
				background: blue;
				float: left;
			}


			.class2 {
				width: 20px;
				height: 30px;
				background: yellow;
				float: left;
			}


			.class3 {
				width: 20px;
				height: 30px;
				background: fuchsia;
				float: left;
			}


			.class4 {
				width: 20px;
				height: 20px;
				background: chartreuse;
				float: left;
			}
		</style>
		<title></title>
	</head>
	<body>
		<div id="wrap2">
			<div class="class1"></div>

			<div class="class2"></div>

			<div class="class3"></div>

			<div class="class4"></div>

		</div>
	</body>
</html>


效果截图：


溢出处理
样例代码：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #d1{
                /* 容器 */
                border: solid 1px red;
                height: 200px;
                width: 150px;
                /* overflow: visible; */
                /* overflow: hidden; */
                /* overflow : scroll; */
                /* overflow: auto; */
                overflow-x: scroll;
            }

            #d2{
                /* 出现移除的内容*/ 
                width: 180px;
                border: solid 2px green;
            }

        </style>
    </head>
    <body>

        <div id="d1">
            <div id="d2">222222</div>

        </div>
    </body>
</html>

效果截图：



当d2的宽度超过了父级d1的宽度时，我们可以通过设置不同的overflow属性值来实现不同的解决办法，我所演示的是浏览器会显示滚动条以便查看其余内容。

清除浮动




clear属性
说明




left
在左侧不允许浮动元素


right
在右侧不允许浮动元素


both
在左、右两侧不允许浮动元素


none
默认值，允许浮动元素出现在两侧


样例代码：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .container{
                border: solid 1px blue;
                
            }
            .class1 {
                width: 200px;
                height: 100px;
                background: palegreen;
                float: left;
            }    

            .class2 {
                width: 250px;
                height: 130px;
                background: gold;

                float: left;
            }

            .class3 {
                width: 300px;
                height: 180px;
                background: red;
                float: left;

            }
            /* .clear{
                clear: both;
            } */
        </style>
    </head>
    <body>
        <div class="container">
            <div class="class1">我是块级元素1</div>
            <div class="class2">我是块级元素2</div>
            <div class="class3">我是块级元素3</div>
            <div class="clear">牛哄哄的柯南牛哄哄的柯南牛哄哄的柯南牛哄哄的柯南牛哄哄的柯南</div>
        </div>

    </body>
</html>

没有清除两侧浮动效果截图：



把代码中的这段代码的注释去掉，来清除两侧浮动
/* .clear{
    clear: both;
} */

清除两侧浮动效果截图：



可以很明显的看出：

清除两侧浮动后，有扩展父级盒子高度的作用

写作不易，读完如果对你有帮助，感谢点赞支持！

如果你是电脑端，看见右下角的“一键三连”了吗，没错点它[哈哈]


加油！
共同努力！
Keafmd

属性	说明
left	元素向左浮动
right	元素向右浮动
none	默认值，元素不浮动

overflow属性	说明
visible	默认值。内容不会被修剪，会呈现在盒子之外
hidden	内容会被修剪，并且其余内容是不可见的
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

clear属性	说明
left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在左、右两侧不允许浮动元素
none	默认值，允许浮动元素出现在两侧

收起

展开全文

css html 前端

CSS浮动与清除浮动

千次阅读 多人点赞 2020-02-23 16:22:12

今天是第一次写博客，已经迫不及待地想把这周在逆战班学习的内容分享一下，这是我对css浮动与清除浮动的理解，希望可以帮助你。 CSS浮动与清除浮动（本文以div元素布局为例。）前言：由于CSS内容比较多，只能有...

CSS浮动与清除浮动（ 本文以div元素布局为例。）
前言：由于CSS内容比较多，只能有针对性的讲解。 如果读者理解CSS盒子模型，但对于浮动不理解，那么这篇文章可以帮助你。
首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是文档流，文档流是文档中可显示对象在排列时所占用的位置。如下图：



代码如下：
<body>
    <div id="box1">我是box1</div>
    <div id="box2">我是box2</div>
    <div id="box3">我是box3</div>
</body>

<style>
        #box1{ width: 200px;  height: 100px; background: red;  }
        #box2{ width: 300px; height: 50px;  background: blue; }
        #box3{width: 500px; height: 100px; background: yellow; }
 </style>

 可以看出，box1（红色框）的右边即使可以放下box2（蓝色框），但是蓝色的框没有放到它后面，这
 就是所谓的文档流。如果我们想让他在后面如何做呢？这就用到了CSS浮动。

什么是CSS浮动？

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


浮动的意义：设置了浮动属性的元素会脱离普通标准流的控制，移动到其父元素中指定的位置的过程，将块级元素放在一行，浮动会脱离标准流，不占位置，会影响标准流，浮动只有左右浮动，不会出现上下浮动。


浮动的使用：基本语法格式：选择器{float:属性值;}

left 元素向左浮动 right 元素向右浮动 none 元素不浮动
下面用例子讲一下：假设给box2添加一个左浮动(float:left;)，那么可以认为box2是浮
动起来了，box2脱离了文档流，box3会占用它的位置。（你可以这样理解，刚开始它
们在一层，现在加上float:left；则box2去了第二层，box1和box3依然在第一层）




<style>
        #box1{ width: 200px; height: 100px; background: red;  }
        #box2{  width: 300px;  height: 50px;  background: blue; float: left; }
        #box3{ width: 500px; height: 100px; background: yellow; }
</style>

 那么左浮动知道了，右浮动(float:right;)也是如此。可能有的小伙伴会问，为什么box2没有在上面跟   
 box1同行呢，这就是文档流的原因了。box1占据了整个一行，box2会在box1下面右浮动，使box3占据
 box2的位置。


<style>
        #box1{ width: 200px; height: 100px; background: red;  }
        #box2{  width: 300px;  height: 50px;  background: blue; float:right; }
        #box3{ width: 500px; height: 100px; background: yellow; }
</style>

那么如果使得box1,box2都设置了浮动呢？

先看box1，box2同时设置左浮动(float:left;)。如图所示，box1,box2相当于脱离了文档流（都到了二
层），只有box3在没有脱离（第一层），那么就会出现现在的这个问题了。


<style>
        #box1{ width: 200px; height: 100px; background: red; float: left; }
        #box2{  width: 300px;  height: 50px;  background: blue; float: left;; }
        #box3{ width: 500px; height: 100px; background: yellow; }
</style>

在看box1，box2同时设置右浮动(float:right)。此时，box1，box2会跑到右边去，因为他们两个都脱离
了文档流，如下图（1），我想给box3宽度增加一些可能更加理解，于是看图（2）


<style>
        #box1{ width: 200px; height: 100px; background: red; float:right; }
        #box2{  width: 300px;  height: 50px;  background: blue; float: right;; }
        #box3{ width: 500px; height: 100px; background: yellow; }
  </style>


<style>
        #box1{ width: 200px; height: 100px; background: red; float:right; }
        #box2{  width: 300px;  height: 50px;  background: blue; float: right;; }
        #box3{ width:1000px; height: 100px; background: yellow; }
 </style>

现在给box1，box2，box3同时设置左浮动(float:left;)。此时他们三个就并排在了一行，因为他们都脱
离了文档流（同一层），所有才会排列在一行。


<style>
        #box1{ width: 200px; height: 100px; background: red; float: left; }
        #box2{  width: 300px;  height: 50px;  background: blue; float: left;; }
        #box3{ width: 500px; height: 100px; background: yellow; float: left;}
</style>

同理给box1，box2，box3同时设置右浮动(float:right;),如下图：


<style>
        #box1{ width: 200px; height: 100px; background: red; float: right; }
        #box2{  width: 300px;  height: 50px;  background: blue; float: right;; }
        #box3{ width: 500px; height: 100px; background: yellow; float: right;}
</style>

至此，恭喜你掌握了添加浮动，但还有清除浮动，有上边的基础清除浮动非常容易理解。
经过上边的学习，可以看出：元素浮动之前，也就是在文档流中，是竖向排列的，而浮动之后可以理解为横向排列。 清除浮动可以理解为打破横向排列。
清除浮动的关键字是clear。元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。 clear 属性指定元素两侧不能出现浮动元素。
语法：

   clear : none | left | right | both

   取值
   none  :  默认值。允许两边都可以有浮动对象
   left   :  不允许左边有浮动对象
   right  :  不允许右边有浮动对象
   both  :  不允许有浮动对象

定义非常容易理解，但是读者实际使用时可能会发现不是这么回事。

下面我给你分析一下：

假如页面中只有两个box1,box2，它们都是左浮动，如下图



此时box1，box2都浮动，根据规则，box2会跟随在box1后边，但我们仍然希望box2能排列在box1下边，就像box1没有浮动，box2左浮动那样。
这时候就要用到清除浮动（clear）,你可能会尝试这样写：在box1的CSS样式中添加clear:right;，理解为不允许box1的右边有浮动元素，由于box2是浮动元素，因此会自动下移一行来满足规则。其实这种理解是不正确的，这样做没有任何效果。
对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。

怎么理解呢？就拿上边的例子来说，我们是想让box2移动，但我们却是在box1的CSS样式中使用了清除浮动，试图通过清除box1右边的浮动元素(clear:right;)来强迫box2下移，这是不可行的，因为这个清除浮动是在box1中调用的，它只能影响box1，不能影响box2。
要想让box2下移，就必须在box2的CSS样式中使用浮动。本例中box2的左边有浮动元素box1，因此只要在box2的CSS样式中使用clear:left;来指定box2元素左边不允许出现浮动元素，这样box2就被迫下移一行。如下图：


<style>
        #box1{ width: 200px; height: 100px; background: red; float:left; }
        #box2{  width: 300px;  height: 50px;  background: blue; clear: left; }
</style>

那么假如页面中只有两个元素box1、box2，它们都是右浮动呢？读者此时应该已经能自己推测场景，如下图


<style>
        #box1{ width: 200px; height: 100px; background: red; float:right; }
        #box2{  width: 300px;  height: 50px;  background: blue;float: right; }
    </style>

此时如果要让box2下移到box1下边，要如何做呢？我们希望移动的是box2，就必须在box2的CSS样式中调用浮动，因为浮动只能影响调用它的元素。
可以看出box2的右边有一个浮动元素box1，那么我们可以在box2的CSS样式中使用clear:right;来指定box2的右边不允许出现浮动元素，这样box2就被迫下移一行，排到box1下边。如下图图片跟代码。


<style>
        #box1{ width: 200px; height: 100px; background: red; float:right; }
        #box2{  width: 300px;  height: 50px;  background: blue; float: right;clear: right; }
  </style>

至此，你已经掌握了CSS浮动与清除浮动基本原理，足以应付常见的布局。
其实，万变不离其宗，只要读者用心体会，再复杂的布局都可以通过我给你总结的规律搞定。

收起

展开全文

css html

java按浮动率、浮动方向取浮动值
2020-03-21 10:02:31
java按浮动率、浮动方向取浮动值 /** * 按上下浮动率百分比转换数值 * @param num * @param floatDirection 浮动方向 * @param rate 浮动率 * @return */ public int getRatedValue(int num,int ...
收起
CSS浮动(清除浮动)
2020-12-06 11:08:38
清除浮动为什么需要清除浮动清除浮动清除浮动方法额外标签法父级添加overflow伪元素法双伪元素清除浮动为什么需要清除浮动由于父级盒子很多情况下, 不方便给高度, 但是子盒子浮动又不占有位置, 最后父级盒子高度...
收起
css
css浮动
千次阅读 多人点赞 2018-05-08 14:51:13
很早以前就接触过CSS，但对于浮动始终非常迷惑，可能是自身理解能力差，也可能是没能遇到一篇通俗的教程。前些天小菜终于搞懂了浮动的基本原理，迫不及待的分享给大家。写在前面的话：由于CSS内容比较多，小菜没有...
收起
css 前端
清除浮动
2020-12-26 14:37:55
一、为什么需要清除浮动由于父级盒子在很多情况下，不方便给高度，而子盒子浮动又不占有位置，最后导致盒子的高度为0，就会影响下面的标准流清除浮动的本质：a.清除浮动元素造成的影响 b.如果父盒子本身有...
收起
css
Float浮动
2020-05-23 11:17:41
Float浮动 CSS中float属性会使元素浮动，使元素向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。实例元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。使用float意味着使用块...
收起
css html js
HTML 浮动
千次阅读 2019-07-26 19:39:22
浮动框会脱离文档（ DOM ）流，（也就是浮动框会脱离原来的界面，浮动到原来界面的上方界面）父级元素会表现出浮动框不存在一样现象。元素一旦浮动之后，后面的元素就会占据前面元素的位置元素浮动之后的确可以...
收起
css浮动和清除浮动
2017-09-03 22:25:12
Css样式的float浮动属性，用于设置标签对象（如：标签盒子、标签、标签、标签等html标签）的浮动布局，浮动也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。一般情况是一个盒子里...
收起
css float 方法
CSS——CSS浮动与清除浮动
千次阅读 2020-07-02 17:17:15
浮动详细内幕特性float 浮漏特现在就可以用float实现一些基本页面布局了链接清除浮动为什么要清除浮动清除浮动本质※ 清除浮动的方法1.额外标签法2.父级添加overflow属性方法3.使用after伪元素清除浮动4.使用...
收起
css html
清除浮动的最常用的四种方法，以及优缺点
万次阅读 多人点赞 2018-07-29 13:01:27
为什么要清除浮动？清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题 1.如下，我给父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父...
收起
web clear:both overflow 伪元素
CSS中浮动与浮动清除
2019-03-04 18:31:06
前言 &nbsp;...不知道各位有没有跟我一样的感觉，所以我找了一段整块时间研究了一下浮动的原理和清除浮动的方法，并写下这篇分享文章。此分享仅供参考，有什么理解错误的地方敬请大家指正。 C
收起
css
左浮动和右浮动
千次阅读 2015-01-18 11:28:50
左浮动和右浮动
收起
独立开发者
什么是浮动，如何应用浮动
2020-10-13 23:11:27
在说float（浮动）之前应该让大家了解下什么是浮动，其实浮动这个属性在没有被清除浮动之前它在文档流里面表现出来的现象就像我们生活中的河流或者大海，里面有水有鱼有各种沉积物比如船啊什么的，我们可以把鱼、水...
收起
javascript css html jquery css3
元素浮动与浮动清除
2016-04-18 15:21:37
元素浮动 float: left | right | none 1、浮动的元素，将向左或者向右浮动，浮动到包围元素的边上，或者上一个浮动元素的边上为止。 2、浮动的元素，不再占用空间，且浮动元素的层级要高于普通元素。 3、...
收起
css
浮动原理和清除浮动
2016-10-21 11:43:24
浮动框不属于文档中的普通流（文档流），即脱离了文档流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含...
收起
浮动布局
千次阅读 2019-08-06 19:33:43
什么是浮动 CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。 Float（浮动），往往是用于图像，但它在布局时一样非常有用。对于新手 CSS 开发人员，尤其前端 Web产品开发人员，float ...
收起
css闭合浮动、清除浮动
2017-05-02 22:16:41
css闭合浮动、清除浮动
收起
css
盒子的浮动和浮动的清除
2020-04-19 14:41:41
清除浮动的方法
收起
html css3
css 清除浮动
千次阅读 2021-02-01 20:18:48
在css3中，当我们布局一个元素使它浮动的时候，我们常常会用到float（浮动）属性，使其元素左浮动、右浮动或者两端浮动，等。但是当我们定义了浮动属性之后，如果我们想要清除浮动，那该怎么办呢？一、浮动的特性 ...
收起
css
自由浮动时间与总浮动时间
千次阅读 2019-10-29 17:02:25
总浮动时间LS1-ES1/LF1-EF1 总浮动时间是指在不延误项目完成日期或违反进度制约因素的前提下，某进度活动可以推迟的总时间量(从其最早开始日期起算)。总浮动时间=最晚开始时间-最早开始时间=最晚完成时间-最早...
收起

浮动

页面布局的主要方式：

浮动

1.浮动的定义

2.浮动的特性

3.清除浮动

4.浮动带来的影响及解决

浮动以及清除浮动

文章目录

浮动

浮动特征

浮动会脱离文档

浮动可以内联排列

浮动会导致父元素高度坍塌

清除浮动

clear清除浮动

BFC清除浮动

BFC的主要特征

BFC的触发方式

CSS浮动

CSS浮动

浮动的特性

float属性

三个div都不浮动

第一个div浮动

第二个div浮动

三个div都浮动

浮动的父子关系

浮动影响父层盒子高度

overflow属性

溢出处理

清除浮动

CSS浮动与清除浮动

CSS浮动与清除浮动（ 本文以div元素布局为例。）

java按浮动率、浮动方向取浮动值

CSS浮动(清除浮动)

css浮动

清除浮动

Float浮动

HTML 浮动

css浮动和清除浮动

CSS——CSS浮动与清除浮动

清除浮动的最常用的四种方法，以及优缺点

CSS中浮动与浮动清除

左浮动和右浮动

什么是浮动，如何应用浮动

元素浮动与浮动清除

浮动原理和清除浮动

浮动布局

css闭合浮动、清除浮动

盒子的浮动和浮动的清除

css 清除浮动

自由浮动时间与总浮动时间

浮动

CSS浮动与清除浮动（本文以div元素布局为例。）