CSS之浮动模型

浮动模型又叫流模型，什么是float（浮动）

最早是为了适应报纸的排版，文字环绕图片的效果，后来经过使用和研究发展出一系列复杂的用法。

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动流

为了说明什么是浮动流，我们先用代码看一下效果

<div class="demo1"></div>
<div class="demo2"></div>
-----------------------------------------------------------------
.demo1 {
	float: left;
	width: 100px;
	height: 100px;
	background-color: green;
}

.demo2 {
	width: 150px;
	height: 150px;
	background-color: gray;
	opacity: 0.5;
}

效果：demo1这个div设置了一个向左浮动，我们会看到demo2覆盖了demo1

问题：这是不是说明浮动元素也脱离了原来的层级呢？

其实并不是，这是因为浮动元素产生了浮动流，所有产生了浮动流的元素，块级元素是看不到他们的（也就是说，块级元会认为浮动元素所占的位置是没有东西的，就会自动覆盖上去）。

问题注解：
BFC化的元素和文本类属性的元素（带有inline的元素）

以及文本可以看到浮动元素。

但是，没有BFC化的块级元素看不到浮动元素。

也就是说产生浮动的元素对不同的其他元素的影响不同。

什么是BFC？

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

BFC(Block Formatting Context)：块级格式化上下文。
BFC决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当设计到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定的规则进行布局。一个环境中的元素不会影响到其他环境中的布局。

BFC的原理（渲染规则）

BFC元素垂直方向的边距会发生重叠。属于不同BFC外边距不会发生重叠
BFC的区域不会与浮动元素的布局重叠。
BFC元素是一个独立的容器，外面的元素不会影响里面的元素。里面的元素也不会影响外面的元素。
计算BFC高度的时候，浮动元素也会参与计算(清除浮动)

如何创建BFC

overflow不为visible;
float的值不为none；
position的值不为static或relative；
display属性为inline-blocks,table,table-cell,table-caption,flex,inline-flex;

例如：

poosition:absolute;
display:inline-block;
float:left/right;
overflow:hidden;

看一个例子，假设我们有这样一个需求，父元素是一个自适应高度的div，需要把带有浮动属性的子元素填充到这个父元素中

<body>
		<div class="box">
			<div class="content">1</div>
			<div class="content">2</div>
			<div class="content">3</div>
		</div>
</body>
----------------------------------------------------------------
* {
	margin: 0;
	padding: 0;
}

.box {
	border: 1px solid black;
}

.content {
	float: left;
	height: 100px;
	width: 100px;
	background-color: gray;
}

这是因为子元素是浮动元素，父元素是块级元素，块元素看不到浮动元素，但是行内元素可以看到。

解决方案有两种：

第一种解决方式，但是这种方式不推荐，因为会改变文档的结构。

在浮动元素的同级dom下添加一个行内元素标签，比如p标签，再给它添加一个css样式clean：both（清除所有浮动流），这样p标签左右的浮动就被清除了，父级元素就被撑开了。

<div class="box">
			<div class="content">1</div>
			<div class="content">2</div>
			<div class="content">3</div>
			<p class="clean"></p>
</div>
------------------------------------------------------------
.clean {
	clear: both;
}

第二种解决方式，推荐

使用伪元素来清除浮动
关于伪元素可以参考这里伪元素
开发中应使用这种方式。

<div class="box">
			<div class="content">1</div>
			<div class="content">2</div>
			<div class="content">3</div>
</div>
--------------------------------------------------------------------
/*使用伪元素来清除逻辑上最后的浮动*/
.box::after {
	/*伪元素必须设置content属性*/
	content: "";
	/*clear属性只对块级元素生效,所以要把伪元素设置成块级元素*/
	display: block;
	clear: both;
}

清除浮动后的效果如下：

问题注解：BFC化的元素和文本类属性的元素（带有inline的元素）

以及文本可以看到浮动元素。

但是，没有BFC化的块级元素看不到浮动元素。

也就是说产生浮动的元素对不同的其他元素的影响不同。

猜你喜欢

问题注解：
BFC化的元素和文本类属性的元素（带有inline的元素）