浮动流,清除浮动流以及标签嵌套问题

最新推荐文章于 2024-06-18 12:29:21 发布

Guo_Elleny

最新推荐文章于 2024-06-18 12:29:21 发布

阅读量195

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/Guo_Elleny/article/details/114785708

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

浮动流以及标签嵌套问题

浮动流
浮动的元素会产生浮动流
所有产生了浮动流的元素，块级元素看不到产生的浮动流的元素

但是产生了bfc的元素以及文本类元素(inline)以及文本都能看见产生了浮动流的元素

因此，我们经常需要清除浮动流
原理:在产生浮动流的后面清除浮动流就不会对后面的元素产生影响
方法有几种但是较为好的方法如下

方法:加::after伪元素清除浮动
清除浮动clear:both; 这个属性必须在块级元元素才起作用
而::after是行内元素
例子如下:

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style>
		.wrapper::after
		{
			content: "";
			clear: both;
			display: block;
		}
		.wrapper
		{
			border: 1px solid black;
		}
		.contemt
		{
			float: left;
			width: 100px;
			height: 100px;
			background-color: black;
			color: #fff;
		}
	</style>
</head>
<body>
	
	<div class="wrapper">
		<div class="contemt">1</div>
		<div class="contemt">2</div>
		<div class="contemt">3</div>
	</div>
</body>

清除浮动流其他方法如下:
1.加一个结构通常是<p></p>标签
缺点:增加html标签来改变 html 结构，从而清除浮动，这种方式在开发中是不能使用的

<div class="wrapper">
		<div class="contemt">1</div>
		<div class="contemt">2</div>
		<div class="contemt">3</div>
		<p></p>
	</div>

		.wrapper
		{
			border: 1px solid black;
		}
		.contemt
		{
			float: left;
			width: 100px;
			height: 100px;
			background-color: black;
			color: #fff;
		}
		p
		{
			clear:both;
		}

百度出来说还有两种方法，有需要的可以看看这篇blog，自认为写的不错
清除浮动流4种方法
https://juejin.cn/post/6844903504545316877

标签嵌套问题

我们在元素嵌套时，
行级元素只能嵌套行级元素，块级元素可以嵌套任何元素。
div 里面可以加任何东西，span 里面只能加行级元素

1.块级元素 p 标签里面不能嵌套块级元素
如果嵌套了，p会拆解
如<p><div>s</div></p> 在这里插入图片描述

2.a标签里面不能嵌套a标签

Guo_Elleny

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浮动流,清除浮动流以及标签嵌套问题

浮动流以及标签嵌套问题浮动流浮动的元素会产生浮动流所有产生了浮动流的元素，块级元素看不到产生的浮动流的元素但是产生了bfc的元素以及文本类元素(inline)以及文本都能看见产生了浮动流的元素因此，我们经常需要清除浮动流**原理:**在产生浮动流的后面清除浮动流就不会对后面的元素产生影响方法有几种但是较为好的方法如下**方法：**加::after伪元素清除浮动清除浮动clear:both; 这个属性必须在块级元元素才起作用而::after是行内元素例子如下:<!DOCT
复制链接

扫一扫