浮动没写完浮动对行内元素和块级元素的影响

最新推荐文章于 2024-09-24 15:55:35 发布

快乐的高兴的学习代码中

最新推荐文章于 2024-09-24 15:55:35 发布

阅读量173

点赞数

本文链接：https://blog.csdn.net/A123ppleQueen/article/details/120840963

版权

浮动会影响元素 h3 这只是一个例子，其他列子暂时还没有想到。

一般来说，一个div元素浮动后，后面的div元素也会被影响。如果两个div大小相同，那么这两个div会重叠。

然而，一个ul li元素进行浮动后，后面的元素h3位置变了,没有被重叠.但是h3是块级元素，应该独占一行的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		ul li{
			list-style: none;
			float: left;
			width: 40px;
			height: 40px;
			background-color: #98FB98;
		}
		</style>
	</head>
	<body>
		<ul>
			<li>11</li>
			<li>22</li>
			<li>33</li>
		</ul>
		<h3>444</h3>
	</body>
</html>

h3的确独占了一行，但是是ul li 浮动在上面，因为浮动脱离了普通文档流。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		ul li{
			list-style: none;
			float: left;
			width: 40px;
			height: 40px;
			background-color: #98FB98;
		}
		h3{
			/* width: 40px;
			height: 40px; */
			background-color: aqua;
		}
		</style>
	</head>
	<body>
		<ul>
			<li>11</li>
			<li>22</li>
			<li>33</li>
		</ul>
		<h3>444</h3>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		ul li{
			list-style: none;
			float: left;
			width: 40px;
			height: 40px;
			background-color: #98FB98;
		}
		h3{
			/* width: 40px;
			height: 40px; */
			float: left;
			background-color: aqua;
		}
		h2{
			background-color: #9ACD32;
		}
		</style>
	</head>
	<body>
		<ul>
			<li>11</li>
			<li>22</li>
			<li>33</li>
		</ul>
		<h3>444</h3>
		<h2>5555</h2>
	</body>
</html>

第三，以前你说清楚浮动只影响高度不影响方向，但是清除同一方向的明明影响了啊

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		ul li{
			list-style: none;
			float: left;
			width: 40px;
			height: 40px;
			background-color: #98FB98;
			clear: left;
		}
		h3{
			background-color: aqua;
			margin-top: 30px;
		}
		</style>
	</head>
	<body>
		<div>
			<ul>
				<li>11</li>
				<li>22</li>
				<li>33</li>
			</ul>
			<div>
				<h3>444</h3>
			</div>
		</div>
	</body>
</html>