浮动流——让父级元素包住子元素

最新推荐文章于 2023-11-06 16:55:55 发布

এPlutus

最新推荐文章于 2023-11-06 16:55:55 发布

阅读量746

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/shbk_/article/details/113486526

版权

CSS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文探讨了CSS布局中如何让父级元素包住浮动的子元素，介绍了四种方法：设置高度、清除浮动、使用伪元素和绝对定位。详细解释了每种方法的工作原理和适用场景，重点讲解了使用伪元素如`::after`来清除浮动流，以确保父级元素能够正确包裹其内容。同时，文章还提到了块级元素、行级元素以及BFC（块格式化上下文）的概念。

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

让父级元素包住子元素

方法一

是加 height（只能解决一小部分）；

方法二

是清除浮动流用 clear 清除周边的浮动流

方法三

父级包住浮动元素的解决方法： p 元素只要逻辑上在这里出生，并且清除浮动流，父级自然而然被他撑开
p{
	border-top: 0 solid gold;
	clear: both;
}
不管有多少个 div，大盒子都会被撑开
正常来说，在清除浮动的时候，是不能像上面那样通过增加<p>来改变 html 结构，
从而清除浮动，这种方式在开发中是不能使用的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>浮动流</title>
		<!-- <link rel="stylesheet" type="text/css" href="../css/浮动流.css"/> -->
		<style>
			*{
				margin: 0;
				padding: 0;
			}

			.box{
				float: left;
				width: 100px;
				height: 100px;
				background-color: firebrick;
				opacity: 0.5;
			}

			.demo{
				/*float: left;*/
				/*display: inline-block;*/
				width: 150px;
				height: 150px;
				background-color: aqua;
			}

			.wrapper{
				border: 1px solid black;
			}

			.content{
				float: left;
				color: chartreuse;
				background-color: deepskyblue;
				width: 100px;
				height: 100px;
			}
			/*伪元素选择器天生是行级元素。*/
			div::after{
				content: "";
				/*clear 很特殊，想让他生效，必须是块级元素*/
				clear: both;
				display: block;	
			}

			/*p{
				border-top: 0 solid gold;
				clear: both;
			}*/


			/*
			span::before{
				content: "成哥";
				position: relative;
				left: 0;
				top: 100px;
				content: "";
				display: inline-block;
				width: 100px;
				height: 100px;
				background-color: red;
			}

			span::after{
				content: ",是的";
			}*/


			/*凡是设置了 position:absolute;或 float:left/right;
			*他会打系统内部，把元素转换成inline-block，所以由内容来决定宽高，改成 block 才能独占一行*/
			span{
				float: left;
				width: 100px;
				height: 100px;
				background-color: red;
			}

		</style>
	</head>
	<body>
		<!--		
		1.浮动元素产生了浮动流
		所有产生了浮动流的元素，块级元素看不到他们
		产生了bfc的元素和文本类属性(inline)的元素以及文本都能看到浮动元素
		
		文本能看到浮动元素。浮动元素不意味着分层，只能说明他产生了浮动流。
		-->
		<!--<div class="box"></div>
		<div class="demo"></div>-->
		
		<!--自适应容器，靠内容撑起容器
			父级包不住了，因为父级是块级元素，看不到浮动元素
			方法一是加 height（只能解决一小部分）；
			方法二是清除浮动流用 clear 清除周边的浮动流
		-->
		<div class="wrapper">
			<div class="content">1</div>
			<div class="content">2</div>
			<div class="content">3</div>
			<!--<p></p>-->
		</div>
		
		
		<!--伪元素选择器-->
		<!--<span>很帅</span>-->
		
		<span>123</span>
	</body>
</html>

方法四

伪元素选择器
伪元素天生就存在于任意一个元素（标签 tag element）里面。天生是行级元素。
为什么叫伪元素？因为他的元素结构是存在的，但是他没写到 HTML 里面，他可以被 css 选中，并正常操作，但是他没有 html 结构，所以叫伪元素。
他有两个特殊的伪元素 before 和 after
伪元素可以跟正常元素差不多可以一起来使用，但是他没有正常的元素结构
一个标签诞生的时候，他就有了伪元素，伪元素存在于逻辑的最前（after）和逻辑的最后（before），只是一般看不见，除非我们通过 css 选中，并操作他
写成 span::before{}就是选择了 span 的 before 伪元素，里面有一个必须要有的值是content:“”。而 content 也只能用在伪元素中
而为了清除 float 的浮动流，就可以用到伪元素，也是最好的选择
clear 很特殊，想让他生效，必须是块级元素才可以，而::after 是行级元素
	.nav::after{
		content: "";
		display: block;
		clear: both;
	}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        /* .wrapper::after{
            content: "";
            clear: both;
            display: block;
        } */

        .wrapper{
            /* float: left; */
            /* display: inline-block; */
            position: absolute;
            border: 1px solid red;
        }

        .content{
            float: left;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>
</body>
</html>