CSS的浮动及其在布局中的应用

精选原创

web_0315 2018-09-04 00:25:26 ©著作权

文章标签 CSS 布局浮动 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者web_0315的原创作品，请联系作者获取转载授权，否则将追究法律责任

CSS浮动是什么

CSS中浮动属性(float)设计的初衷是为了解决页面展示样式时需要文字环绕图片的场景；类似于Word中的文字环绕属性，基础使用场景如下:

浮动前:

浮动后:

代码实现如下(简化版)

<style>
 img{
		float:left;
 }  
</style>
<div>
	<img src="xxx.jpg" alt="test">
	<p>xxx</p>
</div>

浮动带来的问题--高度塌陷

由于设置了float后元素脱离了标准流，从而导致了高度的塌陷，这里有一个很直观的例子

浮动前

浮动后

高度塌陷带来的问题

当出现高度塌陷后原本想放在下面的元素会自动向上补充，出现这种结果

演示代码

<style type="text/css">
	.div1{
		height:100px;
		width:100px;
		background:blue;
		float:left;
	}
	.div2{
		height:10px;
		width:300px;
		background:red;
	}
</style>
<main>
	<div class="div1"></div>
	<p>这里是一个段落</p>
</main>
<div class="div2"></div>

如何解决塌陷--清除浮动

清除浮动主流方法有两种:1）使用clear属性清除浮动；2）新建BFC

利用clear属性

方式一：在设置float的兄弟元素最后设置一个元素，对其设置clear属性，如下

<style type="text/css">
	.div1{
		height:100px;
		width:100px;
		background:blue;
		float:left;
	}
	.div2{
		height:10px;
		width:300px;
		background:red;
	}
	.clearfix{
		clear:both;
	}
</style>
<main>
	<div class="div1"></div>
	<p>这里是一个段落</p>
	<table class="clearfix"></table>
</main>
<div class="div2"></div>

方式二：方式一的缺点还是很明显的，就是平白无故的新增了一个没有内容的元素，使页面出现冗余；这里可以利用伪元素来达到同样的效果

main::after{
		content:"";
		display:table;
		clear:both;
	}

清除浮动后的效果

新建BFC

该方法的原理是：父元素在新建一个 BFC 时，其高度计算时会把浮动子元素的包进来。那么如何新建一个BFC呢

根元素或其它包含它的元素浮动 (元素的 float 不是 none) 绝对定位的元素 (元素具有 position 为 absolute 或 fixed) 内联块 inline-blocks (元素具有 display: inline-block) 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性) 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性) 块元素具有overflow ，且值不是 visible display: flow-root 虽然有这么多方法可用，可我们常用的就是 overflow: hidden

	main{
		overflow:hidden;
	}

也可以达到清除浮动的效果

float在布局中的使用

float元素设计的初衷虽然是文字环绕图片,但是目前其最广泛的应用却是在布局领域，下面除了介绍如何应用在布局外，还会介绍几种常见的float布局方式，下面给出了最简单的流式布局样式

1.传统流式布局

每个div默认占据一行，不论宽度都会占满此行；float布局的核心思想就是怎么把这些一行一行的数据给他以美观的方式呈现出来

代码演示

<div class="div1" style="background-color:red;height:100px;width:350px">
	div1
</div>
<div class="div2" style="background-color:blue;height:120px;width:200px">
	div2
</div>
<div class="div3" style="background-color:green;height:140px;width:50px">
	div3
</div>
<div class="div4" style="background-color:yellow;height:100px;width:600px">
	div4
</div>

2.我们将div2设置为悬浮后会发生什么

为什么会出现这种情况呢?div3莫名其妙的变短了? 其实并不是div3变短了，而是div2设置浮动后脱离了页面的流，悬浮在了其他元素的上面，而div2脱离后div3自然的向上补充，带着div4整体上移，又被div2挡住了一部分所以出现了上图中的情况，对比看一下div2右浮动就比较清晰了

3.再将div3悬浮后会发生什么

同理，这里div2 div3脱离标准流并悬浮其上,组成了一个新的层次；div4直接上移，部分被di2和div3所遮挡

4.基础原理大概介绍完毕，那么如何利用float将上面的代码构造出美观的效果呢

代码示例(为了美观做了部分调整，关注重点即可)

<style>
	.div1,.div2,.div3{
		float:left;
		margin:0 10px;
	}
	.div4{margin:10 10px;}
	.clear-fix::after {
			content: "";
			display: table;
			clear: both;
		}
</style>
<main class="clear-fix">
<div class="div2" style="background-color:blue;height:120px;width:100px;">
	div2
</div>
<div class="div1" style="background-color:red;height:100px;width:350px;">
	div1
</div>
<div class="div3" style="background-color:green;height:140px;width:50px;">
	div3
</div>
</main>
<div class="div4" style="background-color:yellow;height:30px;width:540px">
	div4
</div>

最终样式如下，是网页中非常常见的三列布局方式