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来清理浮动的方法.但是一直想不明白为什么能够实现清除浮动,查阅了网络上的解释,下面来总结一下. 一.首先来想 ...
随机推荐
- akka-typed(8) - CQRS读写分离模式
前面介绍了事件源(EventSource)和集群(cluster),现在到了讨论CQRS的时候了.CQRS即读写分离模式,由独立的写方程序和读方程序组成,具体原理在以前的博客里介绍过了.akka-ty ...
- 黑鸟码表BB10S骑行记录导入行者
前言 开始骑车用行者app记录, 后来觉得每次都要开app很麻烦, 于是在骑友的推荐下入手了黑鸟BB10S, 使用了一段时间感觉还不错, 不过也遇到之前大家说的问题, 黑鸟不支持直接导出fit文件, ...
- 五.数据库同步,创建django用户,用户登陆过程
(1)配置数据库 项目目录/settings.py是一个普通的python模块,每项配置都是一key/value 数据库的配置是以dict的形式存放在这个模块中,key名为:DATABASES DAT ...
- Bootstrap 3.3
https://jeesite.gitee.io/front/bootstrap/3.3/v3.bootcss.com/index.htm
- 1年转行资深前端工程师,开源项目过 1k stars,完整学习过程
先介绍下大致情况时间线. 18 年 8 月正式转方向为前端,之前做了一段时间的 iOS,后来因为对前端更感兴趣所以就打算转方向了.19 年 10 月入职当前公司,定级资深前端,分配到业务架构小组,自此 ...
- 如何配置webpack让浏览器自动补全前缀
一.postcss-loader有什么用? PostCSS 本身是一个功能比较单一的工具.它提供了一种方式用 JavaScript 代码来处理 CSS.它负责把 CSS 代码解析成抽象语法树结构(Ab ...
- JSOI2015 Salesman(树型DP)
[luogu6082] [题目描述] 某售货员小T要到若干城镇去推销商品,由于该地区是交通不便的山区,任意两个城镇之间都只有唯一的可能经过其它城镇的路线. 小T 可以准确地估计出在每个城镇停留的净收益 ...
- git clone下载速度很慢的解决方法
一直用git clone从github上下载源码学习,但是有时候git clone速度好慢,只有几Kb的速度,按这个速度下载安卓源码的话估计要下一年. 然后我再网上找各种教程,试过通过vps下载git ...
- day16 三层装饰器和迭代器
一. 经典的两层装饰器,也是标准装饰器 案例 import time def outter1(func): def wrapper(*args, **kwargs): start = time.tim ...
- 电商项目app开发
购物app的开发 首先我们本次要写的是一个电商的项目,项目主要功能有登录.注册.商品展示.轮播图.加入购物车.购物车管理.支付管理.地址管理.个人信息的修改.商品的分类展示.微信支付等等.主要使用vu ...