浮动 订阅
”鲁迅《野草·好的故事》：“大红花和斑红花，都在水里面浮动。” 茅盾 《路》二：“天空是浮动的轻云。”李二和《那一碧麦田一直牵扯我的记忆》：“这时正是五月，惊风乱飐麦浪，竟有些撩人，浓郁又散乱的麦香时起时伏。我半是哀怜、半是满足地望着在风中浮动的那一碧碧涟漪，竟诡秘地笑了。” 展开全文
”鲁迅《野草·好的故事》：“大红花和斑红花，都在水里面浮动。” 茅盾 《路》二：“天空是浮动的轻云。”李二和《那一碧麦田一直牵扯我的记忆》：“这时正是五月，惊风乱飐麦浪，竟有些撩人，浓郁又散乱的麦香时起时伏。我半是哀怜、半是满足地望着在风中浮动的那一碧碧涟漪，竟诡秘地笑了。”
信息
外文名
float
拼    音
fúdòng
含    义
漂移
中文名
浮动
浮动基本解释
收起全文
精华内容
下载资源
问答
我要提问

  • 浮动

     2019-08-10 17:08:40
    浮动 浮动有三个值，none不浮动，left左浮动，right右浮动 .two { width: 100px; height: 150px; background-color: aquamarine; /* 左浮动 */ float: left; } 浮动后... 
    浮动
    

      

    • 浮动有三个值，none不浮动，left左浮动，right右浮动
      • 

    

    .two {
           width: 100px;
            height: 150px;
            background-color: aquamarine;
            /* 左浮动 */
            float: left;
        }

    

      

    • 浮动后元素本身脱离文档流，原来的位置被其他元素所占据
      • 

    • 浮动后，在同一个父元素中，目标元素会占据一个浮动后位置
      • 

    • 注意：浮动只能是子元素在父容器中进行位置移动，如果父容器剩余宽度不能容纳另一个子元素，那么就换行,元素的浮动范围是父容器
      • 

    • 同一位置多个元素，具有浮动属性的元素，层级高于不浮动属性的元素
      • 

    

    总结：浮动规律：1：找到元素在布局流中的起始位置，2：沿自身水平方向进行浮动，如果水平方向不够，那么就自动换到下一行
    

      

    • 如果没有给父元素设置高度会出现什么问题
      
父元素没有设置固定高度，那么父元素高度由子元素撑起来
      
如果所有子元素都脱离文档流，那么父元素就没有高度了
      
只有不脱离文档流的元素才能撑起父元素的高度
      • 

    

    解决浮动问题：
    
1：给父元素设置一个高度
    
2：在最后一个浮动元素下面新加一个元素，清除浮动
    
3：伪元素清除浮动，给父元素添加伪元素
    
例如：
    

    .warp:after {
            content: "";
            display: block;
            clear: both;
            }
    收起
    展开全文

  • CSS浮动与清除浮动

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

    前言：由于CSS内容比较多，只能有针对性的讲解。 如果读者理解CSS盒子模型，但对于浮动不理解，那么这篇文章可以帮助你。
    

    首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是文档流，文档流是文档中可显示对象在排列时所占用的位置。如下图：
    
定义了三个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 的浮动，会使元素向左或向右移动，其周围的元素也会重新排列。
    

      

    1. 

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

      2. 

    2. 

      浮动的使用：基本语法格式：选择器{float:属性值;}
      
left 元素向左浮动 right 元素向右浮动 none 元素不浮动
      

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

      

      3. 

    

    box3占据了box2的位置，box2在上层
    

    <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的位置。

    

    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在没有脱离（第一层），那么就会出现现在的这个问题了。

    

    box1box2都跑到了二层
    

    <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都浮动
    
此时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

  • CSS浮动

     千次阅读 多人点赞 2020-11-05 22:24:07
    CSS浮动浮动的特性float属性三个div都不浮动第一个div浮动第二个div浮动三个div都浮动浮动的父子关系浮动影响父层盒子高度overflow属性溢出处理清除浮动 浮动的特性 1.浮动主要用于使得div脱离标准文档流，生成多列... 
    CSS浮动
    

    浮动的特性
    

    

    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
    收起
    展开全文
    css html 前端

  • 浮动与清除浮动

     2018-03-05 10:17:27
    浮动与清除浮动浮动相关知识 float属性的取值：left：元素向左浮动。 right：元素向右浮动。 none：默认值。元素不浮动，并会显示在其在文本中出现的位置。浮动的特性：浮动元素会从普通文档流中脱离，但浮动元素... 
    浮动与清除浮动
    


    浮动相关知识 
    
float属性的取值：
    


    left：元素向左浮动。 
    
right：元素向右浮动。 
    
none：默认值。元素不浮动，并会显示在其在文本中出现的位置。
    


    浮动的特性：
    


    浮动元素会从普通文档流中脱离，但浮动元素影响的不仅是自己，它会影响周围的元素对齐进行环绕。 
    
不管一个元素是行内元素还是块级元素，如果被设置了浮动，那浮动元素会生成一个块级框，可以设置它的width和height，因此float常常用于制作横向配列的菜单，可以设置大小并且横向排列。
    


    浮动元素的展示在不同情况下会有不同的规则：
    


    浮动元素在浮动的时候，其margin不会超过包含块的padding。PS：如果想要元素超出，可以设置margin属性 
    
如果两个元素一个向左浮动，一个向右浮动，左浮动元素的marginRight不会和右浮动元素的marginLeft相邻。 
    
如果有多个浮动元素，浮动元素会按顺序排下来而不会发生重叠的现象。 
    
如果有多个浮动元素，后面的元素高度不会超过前面的元素，并且不会超过包含块。 
    
如果有非浮动元素和浮动元素同时存在，并且非浮动元素在前，则浮动元素不会高于非浮动元素 
    
浮动元素会尽可能地向顶端对齐、向左或向右对齐
    


    重叠问题
    


    行内元素与浮动元素发生重叠，其边框，背景和内容都会显示在浮动元素之上 
    
块级元素与浮动元素发生重叠时，边框和背景会显示在浮动元素之下，内容会显示在浮动元素之上
    


    clear属性 
    
clear属性：确保当前元素的左右两侧不会有浮动元素。clear只对元素本身的布局起作用。 
    
取值：left、right、both
    




    **`父元素高度塌陷问题`**
    


    为什么要清除浮动，父元素高度塌陷 
    
解决父元素高度塌陷问题：一个块级元素如果没有设置height，其height是由子元素撑开的。对子元素使用了浮动之后，子元素会脱离标准文档流，也就是说，父级元素中没有内容可以撑开其高度，这样父级元素的height就会被忽略，这就是所谓的高度塌陷。
    




    3.3 清除浮动的方法
    




    方法1：给父级div定义 高度
    


    原理：给父级DIV定义固定高度（height），能解决父级DIV 无法获取高度得问题。 
    
优点：代码简洁 
    
缺点：高度被固定死了，是适合内容固定不变的模块。（不推荐使用）
    




    方法二：使用空元素，如<div class="clear"></div> (.clear{clear:both})
    


    原理：添加一对空的DIV标签，利用css的clear:both属性清除浮动，让父级DIV能够获取高度。 
    
优点：浏览器支持好 
    
缺点：多出了很多空的DIV标签，如果页面中浮动模块多的话，就会出现很多的空置DIV了，这样感觉视乎不是太令人满意。（不推荐使用）
    




    方法三：让父级div 也一并浮起来
    


    这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了，又会产生新的浮动问题。 不推荐使用
    




    方法四：父级div定义 display:table
    


    原理：将div属性强制变成表格 
    
优点：不解 
    
缺点：会产生新的未知问题。（不推荐使用）
    




    方法五：父元素设置 overflow：hidden、auto；
    


    原理：这个方法的关键在于触发了BFC。在IE6中还需要触发 hasLayout（zoom：1） 
    
优点：代码简介，不存在结构和语义化问题 
    
缺点：无法显示需要溢出的元素（亦不太推荐使用）
    




    方法六：父级div定义 伪类:after 和 zoom
    


    .clearfix:after{ 
    
content:’.’; 
    
display:block; 
    
height:0; 
    
clear:both; 
    
visibility: hidden; 
    
} 
    
.clearfix {zoom:1;} 
    
原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题 
    
优点：结构和语义化完全正确,代码量也适中，可重复利用率（建议定义公共类） 
    
缺点：代码不是非常简洁（极力推荐使用） 
    
经益求精写法 
    
.clearfix:after { 
    
content:”\200B”; 
    
display:block; 
    
height:0; 
    
clear:both; 
    
} 
    
.clearfix { *zoom:1; } 照顾IE6，IE7就可以了
    


    详细关于浮动的知识请参看这篇文章： 
    http://luopq.com/2015/11/08/CSS-float/
    收起
    展开全文
    文档

  • 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   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    css浮动、浮动存在的问题、清除浮动
    
                                    
                                2019-05-05 23:35:17
                            
    
                            
    
                                
    
                                    浮动  作用：用来解决图片和文字排版问题 	原理：浮动的框向左或右移动 直到它的边缘碰到包含框或另一个浮动框为止 	特点  	脱离文档流 	 	 	浮动元素会自动生成一个块级框 而不论其本身是何种元素 	 	 	浮动会使...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    Float浮动
    
                                    
                                2020-05-23 11:17:41
                            
    
                            
    
                                
    
                                    Float浮动 CSS中float属性会使元素浮动，使元素向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 实例  元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。 使用float意味着使用块...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        css   
                                        html   
                                        js   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    浮动定位及清除浮动
    
                                    
                                2020-05-05 16:52:59
                            
    
                            
    
                                
    
                                    浮动定位 我们在写页面的时候会经常使用浮动定位  <div class="container">  <div class="item"></div>  <div>Pea horseradish azuki bean lettuce avocado asparagus okra.</div>  &...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        css   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    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   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    CSS中浮动与浮动清除
    
                                    
                                2019-03-04 18:31:06
                            
    
                            
    
                                
    
                                    前言 &amp;nbsp;...不知道各位有没有跟我一样的感觉，所以我找了一段整块时间研究了一下浮动的原理和清除浮动的方法，并写下这篇分享文章。此分享仅供参考，有什么理解错误的地方敬请大家指正。  C
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        css   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    左浮动和右浮动
    
                                    
                                    
                                            千次阅读
                                    
                                2015-01-18 11:28:50
                            
    
                            
    
                                
    
                                    左浮动和右浮动
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        独立开发者   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    浮动布局
    
                                    
                                    
                                            千次阅读
                                    
                                2019-08-06 19:33:43
                            
    
                            
    
                                
    
                                    什么是浮动  CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。  Float（浮动），往往是用于图像，但它在布局时一样非常有用。  对于新手 CSS 开发人员，尤其前端 Web产品开发人员，float ...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                

            


            

                

                

                    
                    
空空如也

                

            


            

                

                

                    
                    
空空如也

                

            


            

                


 

 
 
         

            
                     


                    
                        1 
                    
                    
                        2 
                    
                    
                        3 
                    
                    
                        4 
                    
                    
                        5 
                    
                        ... 
                    
                        20 
                    

                    
            
        

   

                

                

            


        

    

    

        

            

                收藏数
                    46,917
            

            

                精华内容
                    18,766
            

        

        

            
热门标签

            
        


        


        

            关键字：
浮动