CSS基础：float浮动属性的使用&浮动的影响

最新推荐文章于 2024-11-23 21:02:04 发布

渣猫略懂

最新推荐文章于 2024-11-23 21:02:04 发布

阅读量393

点赞数

分类专栏：前端基础文章标签： css html5 html

本文链接：https://blog.youkuaiyun.com/weixin_52854090/article/details/120704994

版权

前端基础专栏收录该内容

30 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul,li,div{
				margin: 0;
				padding: 0;
			}
			ul>li{
				width: 100px;
				height: 100px;
				/* float属性可以设置浮动，让元素脱离标准文档流，可以理解为让元素飘起来，浮在上一层，浮动的*/
				/* 浮动的元素和浮动的元素之间按照顺序排列，未浮动的元素和未浮动的元素按顺序排列 */
				/* 浮动只影响后面的元素，元素浮动以后不在占位，后面的元素会进行补位，呈现浮动元素覆盖未浮动元素的样式 */
				/* 浮动元已元素的顶部为基准对齐,浮动元素不能浮出父元素的范围 */
				/* 浮动元素可以使元素具有行内块元素的特征：块级元素可以横行排列，行级元素可以设置宽高，只是有行内块元素的特征没有进行元素类型转换 */
				/* 未设置宽度的块级元素默认占满父元素的宽度，浮动后没有默认宽度，可以用子元素撑开父元素或单独设置父元素宽度 */
				float: left;
				list-style: none;
			}
			/* 伪元素选择器 */
			ul>li:nth-child(1){
				background-color: #000000;
			}
			/* 表示ul下的第二个li */
			ul>li:nth-child(2){
				background-color: #0000FF;
			}
			/* 表示ul下的第三个li */
			ul>li:nth-child(3){
				background-color: #006400;
			}
			ul>li:nth-child(4){
				background-color: #00FFFF;
			}
			/* 浮动对后面的元素的影响：元素浮动以后不在占位，后面的元素会进行补位，呈现浮动元素覆盖未浮动元素的样式 */
			/* 浮动对父元素的影响：所有子元素浮动以后，父元素未设置高度，父元素将没有高度 */
			/* 浮动对后面文字的影响：元素浮动以后，后面元素内的文字会让出浮动元素的位置，并且文字有可能会被挤到元素之外 */
			div{
				background-color: #A52A2A;
				/* float: left; */
			}
		</style>
	</head>
	<body>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<div id="div1">
			明月别枝惊鹊，清风半夜鸣蝉。稻花香里说丰年，听取蛙声一片。
　　七八个星天外，两三点雨山前。旧时茅店社林边，路转溪头忽见。明月别枝惊鹊，清风半夜鸣蝉。稻花香里说丰年，听取蛙声一片。
　　七八个星天外，两三点雨山前。旧时茅店社林边，路转溪头忽见。明月别枝惊鹊，清风半夜鸣蝉。稻花香里说丰年，听取蛙声一片。
　　七八个星天外，两三点雨山前。旧时茅店社林边，路转溪头忽见。明月别枝惊鹊，清风半夜鸣蝉。稻花香里说丰年，听取蛙声一片。
　　七八个星天外，两三点雨山前。旧时茅店社林边，路转溪头忽见。明月别枝惊鹊，清风半夜鸣蝉。稻花香里说丰年，听取蛙声一片。
　　七八个星天外，两三点雨山前。旧时茅店社林边，路转溪头忽见。明月别枝惊鹊，清风半夜鸣蝉。稻花香里说丰年，听取蛙声一片。
　　七八个星天外，两三点雨山前。旧时茅店社林边，路转溪头忽见。明月别枝惊鹊，清风半夜鸣蝉。稻花香里说丰年，听取蛙声一片。
　　七八个星天外，两三点雨山前。旧时茅店社林边，路转溪头忽见。
		</div>
	</body>
</html>

清除浮动的影响：CSS基础：清除浮动带来的影响_weixin_52854090的博客-优快云博客