CSS清除浮动的四种方法

第一种：使用div空标签法
第二种：父元素使用overflow: hidden
第三种：伪元素选择器:after
第四种：伪元素选择器:before + after

第一种：使用div空标签法

<head>
<style>.left, .right {float: left;width: 200px;height: 200px;background-color: blue;}.test {width: 500px;height: 200px;background-color: red;}
</style>
</head>
<body><div class="parent"><div class="left"></div><div class="right"></div><!-- 清除浮动 --><div style="clear: both"></div></div><div class="test"></div>
</body>

第二种：父元素使用overflow: hidden

<head>
<style>.left, .right {float: left;width: 200px;height: 200px;background-color: blue;}.test {width: 500px;height: 200px;background-color: red;}/* 清除浮动 */.parent {overflow: hidden;}
</style>
</head>
<body><div class="parent"><div class="left"></div><div class="right"></div></div><div class="test"></div>
</body>

第三种：伪元素选择器:after

<head>
<style>.left, .right {float: left;width: 200px;height: 200px;background-color: blue;}.test {width: 500px;height: 200px;background-color: red;}/* 清除浮动 */.parent::after {content: "";display: block;height: 0;visibility: hidden;clear: both;}/* IE6/7 清除浮动 */.parent {*zoom: 1;}
</style>
</head>
<body><div class="parent"><div class="left"></div><div class="right"></div></div><div class="test"></div>
</body>

第四种：伪元素选择器:before + after

<head>
<style>.left, .right {float: left;width: 200px;height: 200px;background-color: blue;}.test {width: 500px;height: 200px;background-color: red;}/* 清除浮动 */.parent::before, .parent::after {content: "";display: table;}.parent::after {clear: both;}/* IE6/7 清除浮动 */.parent {*zoom: 1;}
</style>
</head>
<body><div class="parent"><div class="left"></div><div class="right"></div></div><div class="test"></div>
</body>

CSS清除浮动的四种方法相关推荐

[Web 前端] 018 css 清除浮动的四种方法
清除浮动的四种方法加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both ...
css清除浮动的四种方法(详细)
浮动带来的影响清除浮动主要是为了解决,父元素因为子级元素浮动引起的内部高度为0的问题看下面一段代码 <div class="fater"><div class ...
html中清除浮动的几种方式,清除浮动的几种方法-关于CSS清除浮动的几种方法
CSS清除浮动的3种方法,参考: 方法1: #test{clear:both;} #test为浮动元素的下一个兄弟元素方法2: #test{display:block;zoom:1;overflow ...
CSS清除浮动的几种方法
来源 | https://www.html.cn/web/css/19613.html 今天这篇文章给大家介绍一下CSS清除浮动的几种方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮 ...
Css 清除浮动的几种方法
Css清除浮动的几种方法 1. 为什么添加浮动 2. 为什么清除浮动 3. 清除浮动 1) 额外标签法 2) 利用 Css 的 overflow; 3) after伪元素清除浮动 4)after.be ...
CSS清除浮动的四种常用方法及其优缺点
前言什么是CSS清除浮动? 在非IE浏览器下,当容器的高度为auto(没有设置),且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度 ...
活学活用，CSS清除浮动的4种方法
清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近. CSS清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受. 1.结尾处加空div标签 ...
【CSS】css清除浮动的几种方法
使用了float之后,父级盒子的高度变为0了.我们来写一个例子来看一下,创建一个父级div,并设置border属性,然后下边创建两个子元素span,并设置浮动. 具体代码如下所示: 效果: 由上图可以 ...
CSS清除浮动的五种方法(超详细)
1.为什么要清除浮动? 浮动的原理是让图片脱离文档流,直接浮在桌面上.我们一般布局的时候都是只设置宽度不设置高度,让内容来自动填充高度.但使用浮动后会让原本填充的高度消失,父元素高度为0,后续添加内容 ...

CSS清除浮动的四种方法

CSS清除浮动的四种方法

第一种：使用div空标签法

第二种：父元素使用overflow: hidden

第三种：伪元素选择器:after

第四种：伪元素选择器:before + after

CSS清除浮动的四种方法相关推荐

最新文章

热门文章