6、清除浮动布局(clear)

jasmine_qiqi

已于 2022-04-04 21:00:33 修改

阅读量432

点赞数

分类专栏： CSS 文章标签：前端 css html

于 2022-04-04 20:53:01 首次发布

本文链接：https://blog.csdn.net/weixin_45065754/article/details/123960094

版权

CSS 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

本文介绍了HTML元素的分类，包括块元素、行内元素和行内块元素，并详细讲解了display属性如何转换元素类型。此外，还探讨了元素浮动布局的原理及其解决方法，通过实例演示了如何将行内元素转换为块元素并清除浮动问题。

摘要由CSDN通过智能技术生成

1、Html元素的分类

Html元素分类	标签
块元素	可以设置宽度和高度，独立成行。`h1-6、p、div、ul、li`
行内元素	不可以设置宽度和高度，不能独立成行。`a、span`
行内块元素	可以设置宽度和高度，不能独立成行。`img、input、button`

2、`display`属性

作用	转换块元素和行元素
block	转换为块元素
inline	转换为行内元素
inline-block	转换为行内块元素
none	隐藏元素

3、元素浮动布局

缺点：脱离文档流，不占位，导致浮动元素跟后面的元素重叠
解决方法：清除浮动，在浮动元素的容器中添加clear类,添加伪元素样式(clear:both;)

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="css.css">
	<style>
		* {
			padding: 0px;
			margin: 0px;
		}

		/* 1、把行内元素转换为块元素 */
		a {
			width: 100px;
			height: 100px;
			font-size: 12px;
			border: 1px solid black;
			display: block;
			text-decoration: none;
			align-items: center;
			line-height: 100px;
		}

		/* 2、设置清除浮动样式 */

		.clear::before,
		.clear::after {
			content: '';
			display: block;
			clear: both;
		}


		.list ul li {
			list-style: none;
		}

		.list .pic img {
			width: 100px;
			height: 100px;
		}

		.list .pic,
		.title {
			float: left;
		}
	</style>
</head>

<body>
	<!-- 
		HTML元素分类
		1、块元素：可以设置宽度和高度，独立成行。h1-6、p、div、ul、li
		2、行内元素（内联元素、行级元素）：不可以设置宽度和高度，不独立成行。a、span
		3、行内块元素：可以设置宽度和高度，不独立成行。input、button、img

		display属性
		1、block:转换为块元素
		2、inline:转换为行内元素
		3、inline-block:转换为行内块元素
		4、none:隐藏元素

		元素浮动float布局,脱离文档流，不占位。缺点：导致浮动元素跟后面的元素重叠
		解决方法：清除浮动，在浮动元素的容器中添加clear类,添加伪元素样式(clear:both;)

	 -->

</body>
<!-- 1、把行内元素转换为块元素 -->
<a href="https://www.iconfont.cn/">阿里巴巴矢量库</a>

<!-- 2、元素浮动布局 -->
<div class="list">
	<ul>
		<li class="clear">
			<div class="pic">
				<img src="image.jpg" alt="">
			</div>
			<div class="title">
				<h3>标题</h3>
				<p>内容时间</p>
				<button>按钮</button>
			</div>
		</li>
		<li class="clear">
			<div class="pic">
				<img src="image.jpg" alt="">
			</div>
			<div class="title">
				<h3>标题</h3>
				<p>内容时间</p>
				<button>按钮</button>
			</div>
		</li>
	</ul>
</div>

</html>