html、css || 清除浮动的四种方式

最新推荐文章于 2023-11-26 18:21:44 发布

如何取不重复

最新推荐文章于 2023-11-26 18:21:44 发布

阅读量171

点赞数

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

本文链接：https://blog.csdn.net/qq_46063069/article/details/108661249

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html、css || 清除浮动的四种方式

清除浮动的四种方式

清除浮动的原因：1、父元素没有设置高度； 2、子元素设置了浮动；3、影响了下面元素的布局

一、闭合浮动

//css样式的书写
<style>
        .box {
            width: 1000px;
            margin: 0 auto;
            background-color:pink;
        }
        .smallbox {
            width:100px;
            height: 200px;
            float:left;
            background-color:skyblue;
        }
        .footer {
            width: 1000px;
            height: 100px;
            background-color:black;
        }
        /* 为空白标签，设置clear样式 */
        .clearfix {
            clear:both;
        }
 </style>


<body>
    <div class="box">
        <div class="smallbox"></div>
        <div class="clearfix"></div> 
	</div>
	<div class="footer">footer</div>
</body>

二、overflow：hidden

<style>
	.box {
		width:1000px;
		margin:0 auto;
        background-color: pink;
		/*在父级元素样式加上overflow: hiddden样式，此方法会隐藏溢出*/
		overflow: hidden;
	}
	.smallbox {
		width:100px;
		height: 200px;
		float:left;
        background-color: skyblue;
	}
	.footer {
            width: 1000px;
            height: 100px;
            background-color:black;
        }
</style>

<body>
	<div class="box">
		<div class="smallbox"></div>
	</div>
	<div>footer</div>
</body>

三、after伪元素

<style>
	.box {
		width:1000px;
		margin:0 auto;
        background-color: pink;
	}
	.smallbox {
		width:100px;
		height: 200px;
		float:left;
        background-color: skyblue;
	}
	.footer {
            width: 1000px;
            height: 100px;
            background-color:black;
        }
    /*父级after伪元素*/
	.clearfix:after {
		content:"";
		display: block;
		height:0;
		clear: both;
		visibility: hidden;
	}
	.clearfix {
		*zoom: 1;
	}
</style>
<body>
	<div class="box clearfix">
		<div class="smallbox"></div>
	</div>
	<div class="footer">footer</div>
</body>

四、双伪元素

<style>
	.box {
		width:1000px;
		margin:0 auto;
        background-color: pink;
	}
	.smallbox {
		width:100px;
		height: 200px;
		float:left;
        background-color: skyblue;
	}
	.footer {
            width: 1000px;
            height: 100px;
            background-color:black;
        }
    /*父级双伪元素*/
	.clearfix:before, 
	.clearfix:after {
		content:"";
		display:table;
	}
	.clearfix:after{
		clear:both;
	}
</style>
<body>
	<div class="box clearfix">
		<div class="smallbox"></div>
	</div>
	<div class="footer">footer</div>
</body>