CSS之浮动模型

最新推荐文章于 2021-08-04 02:58:10 发布

Mr晓

最新推荐文章于 2021-08-04 02:58:10 发布

阅读量166

点赞数

分类专栏：前端文章标签：浮动模型 CSS HTML

本文链接：https://blog.csdn.net/lxd_113/article/details/84201531

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

什么是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的元素）以及文本都能看到浮动元素，也就是说产生浮动的元素对不同的其他元素的影响不同

来看一个例子，假设我们有这样一个需求，父元素是一个自适应高度的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;
}

效果如下：
在这里插入图片描述
我们看到子元素并没有将父元素撑开，这是因为子元素是浮动元素，产生了浮动流，而父元素是块级元素，父元素看不到子元素而导致的。
解决方案有两种：

在最后一个浮动元素后面添加一个标签，并且给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;
}

清除浮动后的效果如下：
在这里插入图片描述

Mr晓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS之浮动模型

什么是float（浮动）CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动流为了说明什么是浮动流，我们先用代码看一下效果&lt;div class="demo1"&gt;&lt;/div&gt;&lt;d...
复制链接

扫一扫