HTML元素浮动布局

最新推荐文章于 2023-07-23 21:47:25 发布

Paranoia_yy

最新推荐文章于 2023-07-23 21:47:25 发布

阅读量340

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/Paranoia_yy/article/details/114599559

版权

HTML 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

元素浮动布局float
1.文字环绕，水平布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.red {
				width: 100px;height: 100px;
				background-color: red;
				float: left;
			}
			.green {
				width: 200px;height: 150px;
				background-color: green;
			}
			.a,.b,.c{
				float: left;
				height: 200px;
			}
			.a {
				width: 200px;
				background-color: #DDDDDD;
			}
			.b {
				width: 700px;
				background-color: blueviolet;
			}
			.c {
				width: 300px;
				background-color: coral;
			}
		</style>
	</head>
	<body>
		<p>文字环绕</p>
		<div class="red"></div>
		<div class="green">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
		</div>
		<p>横向排版布局</p>
		<div class="a"></div>
		<div class="b"></div>
		<div class="c"></div>
	</body>
</html>

2.第一行浮动布局，第二行不浮动
注意：要在第一行的三块div外部套一个div，这个div不浮动

div默认情况下width为100%，即占据一行
div的样式overflow：auto 表示对超出边界的元素，父元素可以做相应的调整。

clear：left/right/both 清除浮动
当不希望当前元素收到前面元素影响时，就给当前元素增加clear样式
（简单来说，谁不希望收到影响，谁就增加clear样式）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.a {
				width: 20%;
				background-color: #F4A460;
			}
			.b {
				width: 60%;
				background-color: #8A2BE2;
			}
			.c {
				width: 20%;
				background-color: aquamarine;
			}
			.a,.b,.c {
				height: 200px;
				float: left;
			}
			.second {
				height: 300px;
				background-color: cadetblue;
			}
			.outer {
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div class="outer">
			<div class="a"></div>
			<div class="b"></div>
			<div class="c"></div>
		</div>
		<div class="second">
			
		</div>
	</body>
</html>

对话框案例（含clear用法）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul {
				width: 300px;height: 500px;
				border: 1px solid black
			}
			li {
				clear: both;
			}
		</style>
	</head>
	<body>
		<ul>
			<li style="float: left;">hello</li>
			<li style="float: right;">hi</li>
			<li style="float: left;">hhh</li>
			<li style="float: right;">233</li>
		</ul>
	</body>
</html>

补充
浮动元素在排列时，只参考前一个元素位置即可
（若都为浮动元素，则不会重叠覆盖的）

浮动元素的重叠问题：
1.浮动元素不会覆盖文字内容
2.浮动元素不会覆盖图片内容（图片本身也属于文本，图片是特殊的文字）
3.浮动元素不会覆盖表单元素（输入框、单选按钮、复选框、按钮、下拉选择框）

右浮动会使得显示顺序与书写顺序相反

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.a,.b,.c{
				float: right;
			}
		</style>
		
	</head>
	<body>
		<div class="a">
			1
		</div>
		<div class="b">
			2
		</div>
		<div class="c">
			3
		</div>
	</body>
</html>