css中元素的浮动布局

最新推荐文章于 2024-07-11 17:28:05 发布

越努力越菜

最新推荐文章于 2024-07-11 17:28:05 发布

阅读量165

点赞数

分类专栏： CSS 文章标签： float 页面布局 css

本文链接：https://blog.csdn.net/weixin_42418445/article/details/103413532

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css元素的浮动布局之清除浮动

实现页面布局很重要的一点就是浮动，但是将元素设置浮动之后就脱离的原来的文档流了，这样的话如果想要靠浮动的元素来撑开父元素就没办法做到了，如下所示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.a{
			background:#ff0000 ;
			width: 20%;
		}
		.b{
			background: #00ff00;
			width: 60%;
		}
		.c{
			background: #0000ff;
			width: 20%;
		}
		.a,.b,.c{
			height: 200px;
			float: left;
		}
		.all{
			border: 5px dashed black;
		}
	</style>
	<body>
		<div class="all">
			<div class="a"></div>
			<div class="b"></div>
			<div class="c"></div>
		</div>
			
		
	</body>
</html>

出来的效果是这样的：
明显浮动的元素没有把父元素撑开

要实现把父元素撑开，有两种办法

1、给父元素添加overflow：auto;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.a{
			background:#ff0000 ;
			width: 20%;
		}
		.b{
			background: #00ff00;
			width: 60%;
		}
		.c{
			background: #0000ff;
			width: 20%;
		}
		.a,.b,.c{
			height: 200px;
			float: left;
		}
		.all{
			border: 5px dashed black;
			overflow: auto;
		}
	</style>
	<body>
		<div class="all">
			<div class="a"></div>
			<div class="b"></div>
			<div class="c"></div>
		</div>
			
		
	</body>
</html>

2、直接设置父元素高度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.a{
			background:#ff0000 ;
			width: 20%;
		}
		.b{
			background: #00ff00;
			width: 60%;
		}
		.c{
			background: #0000ff;
			width: 20%;
		}
		.a,.b,.c{
			height: 200px;
			float: left;
		}
		.all{
			border: 5px dashed black;
			height：200px;
		}
	</style>
	<body>
		<div class="all">
			<div class="a"></div>
			<div class="b"></div>
			<div class="c"></div>
		</div>
			
		
	</body>
</html>

效果都是一样的：
在这里插入图片描述

越努力越菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css中元素的浮动布局

css元素的浮动布局之清除浮动实现页面布局很重要的一点就是浮动，但是将元素设置浮动之后就脱离的原来的文档流了，这样的话如果想要靠浮动的元素来撑开父元素就没办法做到了，如下所示<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> ...
复制链接

扫一扫