【CSS】css清除浮动的几种方法
- 使用了float之后,父级盒子的高度变为0了。我们来写一个例子来看一下,创建一个父级div,并设置border属性,然后下边创建两个子元素span,并设置浮动。
具体代码如下所示:
效果:
由上图可以看出,在给span添加了float之后,父级元素div的高度就变成了0(红色框)。我们有以下几种方式来解决这个问题
1、在标签结尾处加空div标签 clear:both
源代码:
效果:
原理: 添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度。
优点: 简单、代码少、浏览器支持好、不容易出现怪问题
缺点: 不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,不利于页面的优化。
2、父级div定义 伪类:after 和 zoom
源代码:
效果:
原理: 元素生成伪类的作用和效果相当于方法2中的原理,但是IE8以上和非IE浏览器才支持:after,zoom(IE转有属性)可解决ie6,ie7浮动问题
优点: 浏览器支持好、不容易出现怪问题,写法是固定的,不理解也可以直接复制使用;(小编大力推荐使用此种方法,简单便捷,只需添加一个class即可解决问题)
缺点: css代码多、不少初学者不理解原理,要两句代码结合使用才能让主流浏览器都支持。
3、父级div定义 overflow:hidden
源代码:
效果:
优点: 简单、代码少、浏览器支持好
缺点: 不能和position配合使用,因为超出的尺寸的会被隐藏。(不建议使用此种方式,可能会影响页面元素布局)
4、给父级元素单独定义高度(height)
源代码:
效果:
原理: 如果父级元素没有定义高度,父元素的高度完全由子元素撑开时,父级div手动定义height,就解决了父级div无法自动获取到高度的问题。
优点: 简单、代码少、容易掌握。
缺点: 只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题。对于响应式布局会有很大影响。
【CSS】css清除浮动的几种方法相关推荐
- css之“清除浮动的3种方法”
<!--一.清除浮动的3种方法.--> <!--1.给最后一个标签添加clear:both 不推荐使用(添加无意义标签,语义化差)--> <div ><ul& ...
- [Web 前端] 018 css 清除浮动的四种方法
清除浮动的四种方法 加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both ...
- CSS清除浮动的四种方法
CSS清除浮动的四种方法 第一种:使用div空标签法 第二种:父元素使用overflow: hidden 第三种:伪元素选择器:after 第四种:伪元素选择器:before + after 第一种: ...
- CSS的浮动及清除浮动的5种方法
浮动是布局的时用到的一种技术,能够方便我们进行布局. 1.浮动的设置:css属性float:left/right/none 左浮动/右浮动/不浮动(默认) 2.浮动的原理:使当前元素脱离普通流,相当于 ...
- 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中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: 1 <div ...
- 活学活用,CSS清除浮动的4种方法
清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近. CSS清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受. 1.结尾处加空div标签 ...
最新文章
- 赌5毛钱,你解不出这道Google面试题
- IOS审核的各个状态的时间
- python timestamp和datetime之间的转换_python – 在datetime,Timestamp和datetime64之间转换
- C++ 中不能被继承的类实现,及从中体现virtual 继承的一个特性
- npm 安装 chromedriver 失败的解决办法
- 全球顶级开源大神们现身 COSCon'20
- 稀疏矩阵的压缩存储--十字链表(转载)
- springboot2整合mysql5_SpringBoot2整合SSM框架详解
- 基于MaxCompute分布式Python能力的大规模数据科学分析
- 数字图像处理(三)——频域滤波
- 亿万富翁夏令营:库克、巴菲特等出席太阳谷峰会
- 两个子集pom互相调用_ConcurrentHashMap 使用:每个 Key 只调用 1 个方法
- Paper reading:高分辨率图像分割:From Contexts to Locality: Ultra-high Resolution Image Segmentation ICCV2021
- python爬京东联盟_PHP调用京东联盟开普勒、宙斯API模板
- Edge使用Flash
- 通过笔记本wifi共享到以太网接口方法----令嵌入式设备接入互联网
- Workgroup 协议
- 商务智能基本概念大总结
- android网络编程记事本,基于android记事本的设计与开发开题报告
- 管理工具-生产管理系统Mes
热门文章
- C 语言编程 6.17 用100元人民币兑换10元,5元和1元的纸币(每一种都要有)共五十张。请用穷举法编程。共有多少种情况
- 数学实验教程matlab版实验报告,MATLAB数学实验报告.doc
- 应用回归分析(知识点整理)(一)
- 解决mac Cornerston的Authentication provider raised an exception 更新失败问题
- linux ghost视频教程,Linux攻略 用Ghost备份Linux系统的方法
- pca图解读_利用R绘制PCA分析图(2)
- 组合逻辑电路二——数字逻辑实验
- c语言中各类型所占字节
- 计算机上午指令系统是指,计算机指令系统是指( )。
- android 图库显示,【Android】 保存图片到系统图库, 并立即显示在图库中