介绍的四种方法都在下面源码的基础上修改演示!

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.div1 {width: 100%;/* display: inline-block; */background-color: pink;}.div2 {width: 200px;height: 200px;background-color: blue;float: left;}.div3 {width: 200px;height: 200px;background-color: orange;float: right;}</style></head><body><div class="div1"><div class="div2"></div><div class="div3"></div></div></body>
</html>

由于两个子元素都设置了浮动,造成粉色的父元素没有高度

方法如下:

1.给父容器上设置属性: display:inline-block

    .div1 {width: 100%;display: inline-block;background-color: pink;}

2.给父容器上设置属性: overflow:auto

 .div1 {width: 100%;overflow: auto;background-color: pink;}

3.给父容器设置:after伪类(:after伪类会追加在父元素所有内容的最后面):

.div1:after{/*设置内容为空*/
content:"";/*设置为块级元素*/
display:block;/*清除浮动*/
clear:both}

三个方法解决后都如下图,浮动清除,粉色的父元素又出现了!

关于CSS清除浮动的三个方法相关推荐

CSS清除浮动的三种方法
第一种:使用div空标签法 <head> <style>.left, .right {float: left;width: 200px;height: 200px;backgr ...
CSS清除浮动的三种方法【前端开发】
p.s.高产量博主,点个关注
CSS清除浮动的四种方法
CSS清除浮动的四种方法第一种:使用div空标签法第二种:父元素使用overflow: hidden 第三种:伪元素选择器:after 第四种:伪元素选择器:before + after 第一种: ...
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清除浮动的4种方法
清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近. CSS清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受. 1.结尾处加空div标签 ...
[Web 前端] 018 css 清除浮动的四种方法
清除浮动的四种方法加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both ...
Web前端CSS清除浮动的5种方法
在移动端清除浮动布局,常用的5种方法: 使用清除浮动的类: 使用overflow属性: 使用 flex 布局: 使用grid 布局: 使用 table 布局. 根据实际情况选择适合的方法,需要注意兼容 ...

关于CSS清除浮动的三个方法

介绍的四种方法都在下面源码的基础上修改演示!

由于两个子元素都设置了浮动,造成粉色的父元素没有高度

方法如下:

1.给父容器上设置属性: display:inline-block

2.给父容器上设置属性: overflow:auto

3.给父容器设置:after伪类(:after伪类会追加在父元素所有内容的最后面):

三个方法解决后都如下图,浮动清除,粉色的父元素又出现了!

关于CSS清除浮动的三个方法相关推荐

最新文章

热门文章