css清除浮动

刺骨的言语ヽ痛彻心扉 2023-05-22 04:53 123阅读 0赞

<!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 type="text/css">
    	.clearfix:before, .clearfix:after {
    	  content: "";
    	  display: table; }
    	
    	.clearfix:after {
    	  clear: both;
    	  overflow: hidden; }
    		
    		
    	.left{
    		float: left;
    		width: 500px;
    		height: 100px;
    		background-color: #00ff00;
    	}
    	.right{
    		float: right;
    		width: 300px;
    		height: 300px;
    		background-color: #55aa7f;
    	}
    	.other{
    		background-color: #5555ff;
    		width: 100px;
    		height: 200px;
    	}
    	</style>
    </head>
    <body>
    	<div class="left">左边的盒子</div>
    	<div class="right">右边的盒子</div>
    	<div class="clearfix"></div>
    	<div class="other">后面的盒子</div>
    	<div class="other">后面的第二个盒子</div>
    </body>
    </html>

显示的效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nYmFva2FuZw_size_16_color_FFFFFF_t_70]  
如果没有`<div class="clearfix"></div>`清除浮动的div话，后面的div会撑上去  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nYmFva2FuZw_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nYmFva2FuZw_size_16_color_FFFFFF_t_70]: /images/20230521/d85a16953e524be69b9da256d3f0cd51.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nYmFva2FuZw_size_16_color_FFFFFF_t_70 1]: /images/20230521/0e3d28dac3b84e1ba074d3945a081974.png

发表评论取消回复

表情：

评论列表（有 0 条评论，123人围观）

还没有评论，来说两句吧...

相关阅读

相关 css清除浮动

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <me

刺骨的言语ヽ痛彻心扉/ 2023年05月22日 04:53/ 0 赞/ 124 阅读

相关 CSS浮动以及清除浮动float

float设定浮动 > 浮动的元素脱离标准流（文档流），相当于飘浮起来了，会释放原先占有的位置，位置不再保留，浮动的元素都具有行内块元素的特性，浮动的盒子只会影响后面的标

女爷i/ 2023年01月18日 06:38/ 0 赞/ 110 阅读

相关 2020 CSS清除浮动

CSS清除浮动 1、在浮动的板块上加 overflow: hidden; 2、在浮动的板块上加 clear:both; 3、在浮动的上一部分板块加

Love The Way You Lie/ 2023年01月01日 07:58/ 0 赞/ 157 阅读

相关 [CSS]闭合浮动（清除浮动）clearfix

一、为什么要闭合浮动（清除浮动）一个父元素中有三个子元素（分别为黑粉紫色）父元素有分别为红色和蓝色的上下边框 ![在这里插入图片描述][202008101756

清疚/ 2022年11月26日 06:53/ 0 赞/ 163 阅读

相关 CSS浮动——浮动的特性、清除浮动

CSS浮动一个页面基本包含了三种布局方式：标准流、浮动和定位浮动（float）浮动可以改变元素标签默认的排列方式，最典型的是可以让多个块级元素一行内排列显示

一时失言乱红尘/ 2022年11月22日 12:52/ 0 赞/ 218 阅读

相关 CSS 清除浮动

今天这篇文章给大家介绍3种CSS清除浮动的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 ![在这里插入图片描述][watermark_type_Zm

男娘i/ 2022年11月22日 05:28/ 0 赞/ 183 阅读

相关 css-清除浮动

1.定义：在非IE浏览器中，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以

逃离我推掉我的手/ 2022年04月22日 13:16/ 0 赞/ 226 阅读

相关 CSS清除浮动

一般在项目开发中，使用浮动的次数是非常多的，浮动好但是也会带来一定的坏处。如 <!DOCTYPE html> <html> <head>

喜欢ヅ旅行/ 2022年01月21日 23:29/ 0 赞/ 277 阅读

相关 CSS清除浮动

.clearfix::before, .clearfix::after \{ content : ""; display : table; cl

矫情吗；*/ 2021年09月08日 15:32/ 0 赞/ 401 阅读

相关 css为什么要清除浮动？浮动如何清除

浮动在页面中有着很大的作用，很多人在做网站的时候，都会遇到浮动的效果，但是很多人都不知道css为什么要清除浮动？以及浮动如何清除？下面我们来了解一下。

红太狼/ 2021年01月28日 16:38/ 0 赞/ 775 阅读