css中使用浮动的情况和清除浮动的方法
1.使用浮动时出现的情况:
(1)使块元素在一行显示
(2)使内嵌元素支持宽高
(3)不设置宽高的时候宽度由内容撑开
(4)换行不被解析(故使用行内元素的时候清除间隙的方法可以使用浮动)
(5)元素添加浮动,会脱离文档流,按照指定的一个方向移动,直到碰到父级的边框或者另外一个浮动元素停止(文档流是文档中可现实对象在排列时所占用的位置)
2.清除浮动的方法:
(1)给父级元素也加浮动(这种情况当父级元素margin:0 auto;也不能居中)
(2)给父级元素加display:inline-block;(同上一种方法不居中,只有IE6,7居中)
(3)在浮动元素下加<div class=”clear”></div> .clear{height:0px;font-size:0;clear:both;},但是在IE6下,块元素有最小高度,即当height<19px时,默认为19px,解决方法:font-size:0;或overflow:hidden;
(4)在浮动元素下加<br clear=”all”>
(5)给父级元素加{zoom:1}
.clear{zoom:1}
.clear:after{content:””;display:block;clear:both;}
(6)给浮动元素父级加overflow:auto;
eg:css的zoom属性:zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外,它还有其他一些小作用,比如触发IE的hasLayout属性,清除浮动,清除margin的重叠等。
css中使用浮动的情况和清除浮动的方法的更多相关文章
- 关于CSS中float的两点心得以及清除浮动的总结
对一个元素运用float后,该元素将脱离正常文档流,这意味着: 1. 运用float后,该元素不再影响父元素的高度,如果一个元素的所有子元素都是float的话,那么该元素的高度是0,这样后面元素渲染的 ...
- css中的浮动与三种清除浮动的方法
说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...
- CSS中浮动属性float及清除浮动
1.float属性 CSS 的 Float(浮动),会使元素向左或向右移动,由于浮动的元素会脱离文档流,所以它后面的元素会重新排列. 浮动元素之后的那些元素将会围绕它,而浮动元素之前的元素将不会受到影 ...
- CSS那些事儿-阅读随笔3(清除浮动)
浮动主要是由浮动(float)属性导致的页面错位现象,清除浮动不仅能解决页面错位的现象,还可以解决子元素浮动导致父元素背景无法自适应子元素高度的问题.在CSS样式中,主要利用clear属性中的both ...
- css考核点整理(一)-浮动的理解和清除浮动的几种方式
浮动的理解和清除浮动的几种方式 clear语法:clear : none | left | right | both 取值:none : 默认值.允许两边都可以有浮动对象left : 不允许左边有浮动 ...
- 在MonoGame中SetRenderTarget会把后备缓冲区清除的解决方法
在MonoGame中SetRenderTarget会把后备缓冲区清除的解决方法: 在构造函数中添加事件:graphics.PreparingDeviceSettings += Graphics_Pre ...
- 认识CSS中布局之文档流、浮动、定位以及叠放次序
前端之HTML,CSS(七) CSS CSS布局的核心就是盒子的摆放,即CSS定位.而CSS中定位机制分为:普通流(nomal flow).浮动(float).定位(position). 普通流 普通 ...
- css浮动(float)及如何清除浮动
前言: CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float)(1)html文档流 自窗体自上而下分成一行一 ...
- overflow:hidden清除浮动原理解析及清除浮动常用方法总结
最近在看<CSS Mastery>这本书,里面有用overflow:hidden来清理浮动的方法.但是一直想不明白为什么能够实现清除浮动,查阅了网络上的解释,下面来总结一下. 一.首先来想 ...
随机推荐
- Idea集成git常用命令
git status --查看文件状态 untracked: 未跟踪 一般为新增文件 git add 状态改为staged git add +文件 git add -A +路径 修改过的未被跟 ...
- DevOps研发模式下「产品质量度量」方案实践
在当今互联网环境下,需求变更越来越快,交付周期却越来越短, 怎么判断一个系统是否测试充分? 产品质量满足什么样的条件才能投产? 如何判断测试工作.研发团队工作的效率是高还是低? 这些问题不能靠感觉.拍 ...
- Spring Boot入门系列(十七)整合Mybatis,创建自定义mapper 实现多表关联查询!
之前讲了Springboot整合Mybatis,介绍了如何自动生成pojo实体类.mapper类和对应的mapper.xml 文件,并实现最基本的增删改查功能.mybatis 插件自动生成的mappe ...
- ASP.NET 开源导入导出库Magicodes.IE 多Sheet导入教程
多Sheet导入教程 说明 本教程主要说明如何使用Magicodes.IE.Excel完成多个Sheet数据的Excel导入. 要点 多个相同格式的Sheet数据导入 多个不同格式的Sheet数据导入 ...
- day02小程序配置
附上微信小程序开发文档的网址:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html 学技术 ...
- 阿里云Linux CentOS8.1 64位服务器安装LNMP(Linux+Nginx+MySQL+PHP) 并发调试之MySQL配置
mysql高并发配置 要在mysqld下设置 1. 修改back_log参数值:由默认的50修改为500.(每个连接256kb,占用:125M) back_log=500 back_log值指出MyS ...
- 别逃避,是时候来给JVM一记重锤了
今天是猿灯塔“365天原创计划”第2天. 今天讲: 为什么写这个主题呢? 之前看到不少同学在讨论, 今天呢火星哥抽出点时间来帮大家整理一下关于JVM的一些知识点 一.JVM是什 ...
- box-shadow,text-shadow
box-shadow:inset 30px 40px 20px #f00; 如上实例,总共五个参数,其中第一个代表阴影是向内阴影还是向外阴影,第二个参数代表向右(从左向右)的偏移量,第三个参数代表向下 ...
- setTimeout还有第三个参数
今天才发现setTimeout还有第三个参数. for (var i = 0; i< 10; i++){ setTimeout((i) => { console.log(i); }, 10 ...
- Scala 面向对象(四):import
1 Scala引入包基本介绍 Scala引入包也是使用import, 基本的原理和机制和Java一样,但是Scala中的import功能更加强大,也更灵活. 因为Scala语言源自于Java,所以ja ...