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中使用浮动的情况和清除浮动的方法的更多相关文章

  1. 关于CSS中float的两点心得以及清除浮动的总结

    对一个元素运用float后,该元素将脱离正常文档流,这意味着: 1. 运用float后,该元素不再影响父元素的高度,如果一个元素的所有子元素都是float的话,那么该元素的高度是0,这样后面元素渲染的 ...

  2. css中的浮动与三种清除浮动的方法

    说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...

  3. CSS中浮动属性float及清除浮动

    1.float属性 CSS 的 Float(浮动),会使元素向左或向右移动,由于浮动的元素会脱离文档流,所以它后面的元素会重新排列. 浮动元素之后的那些元素将会围绕它,而浮动元素之前的元素将不会受到影 ...

  4. CSS那些事儿-阅读随笔3(清除浮动)

    浮动主要是由浮动(float)属性导致的页面错位现象,清除浮动不仅能解决页面错位的现象,还可以解决子元素浮动导致父元素背景无法自适应子元素高度的问题.在CSS样式中,主要利用clear属性中的both ...

  5. css考核点整理(一)-浮动的理解和清除浮动的几种方式

    浮动的理解和清除浮动的几种方式 clear语法:clear : none | left | right | both 取值:none : 默认值.允许两边都可以有浮动对象left : 不允许左边有浮动 ...

  6. 在MonoGame中SetRenderTarget会把后备缓冲区清除的解决方法

    在MonoGame中SetRenderTarget会把后备缓冲区清除的解决方法: 在构造函数中添加事件:graphics.PreparingDeviceSettings += Graphics_Pre ...

  7. 认识CSS中布局之文档流、浮动、定位以及叠放次序

    前端之HTML,CSS(七) CSS CSS布局的核心就是盒子的摆放,即CSS定位.而CSS中定位机制分为:普通流(nomal flow).浮动(float).定位(position). 普通流 普通 ...

  8. css浮动(float)及如何清除浮动

    前言: CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float)(1)html文档流 自窗体自上而下分成一行一 ...

  9. overflow:hidden清除浮动原理解析及清除浮动常用方法总结

    最近在看<CSS Mastery>这本书,里面有用overflow:hidden来清理浮动的方法.但是一直想不明白为什么能够实现清除浮动,查阅了网络上的解释,下面来总结一下. 一.首先来想 ...

随机推荐

  1. JavaScript图形实例:图形放大镜效果

    1. 基本四瓣花型图案 根据四瓣花卉线的参数方程: t= r*(1+sin(12*θ)/5)*(0.5+sin(4*θ)/2); x=t*cos(θ)); y=t*sin(θ)); 编写如下的HTML ...

  2. js语法基础入门(3)

    3.数据类型 3.1.数据类型学习重点 前面我们通俗的讲了,数据类型其实就是对数据进行了分类,那么,在js中到底把数据分成了几类?这些类的名称叫什么?每个分类下面有那些值?这些问题是需要记清楚的,例如 ...

  3. nginx 注释配置及详解

    前言 DMZ(Demilitarized Zone) 非军事区,生产环境 WEB 服务部署的区域,公司的架构为一台nginx 充当 load balance 服务,负载到两台 nginx 上面,反向代 ...

  4. 【错误】fatal: destination path already exists and is not an empty directory. 错误及解决办法

    今天在使用Git for Windows clone代码时,遇到了题目所示的错误,简单来说就是目标路径‘.’已经存在并且不是一个空目录. 可是在我在文件夹下并没有看到任何文件,显示“该文件夹为空”,然 ...

  5. Halcon斑点分析涉及算子及其高阶运用

    涉及算子 获取图像 使用ROI 对齐ROI或图像 校正图像 基础内容这里不再重述 预处理图像(过滤) 基础: mean_image(平均平滑过滤),gauss_filter(高斯滤波),binomia ...

  6. 【Xamarin.Forms 3】页面类型

    系列目录 微信 1.[Xamarin.Forms 1]App的创建与运行 2.[Xamarin.Forms 2]App基础知识与App启动 知乎 1.[Xamarin.Forms 1]App的创建与运 ...

  7. Electron 初识-搭建一个简易桌面应用

    Electron ​ 快速入门 简介 Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用.你可以把它看作是专注于桌面应用而不是 web 服务器的,io.j ...

  8. 常见Python的Web开发框架

    在今天,Python里有很多开发框架用来帮助你轻松创建web应用.web开发框架存在的意义就在于可以快速便捷的构建应用,而不用去在意那些没必要的技术细节(协议.报文.数据结构). 到2020年为止,基 ...

  9. 洛谷 P4042 [AHOI2014/JSOI2014]骑士游戏

    题意 有\(n\)个怪物,可以消耗\(k\)的代价消灭一个怪物或者消耗\(s\)的代价将它变成另外一个或多个新的怪物,求消灭怪物$的最小代价 思路 \(DP\)+最短路 这几天做的第一道自己能\(yy ...

  10. VS2019无法获取本地变量或参数的值,因为它在此指令指针中不可用,可能是因为它已经被优化掉了。

    解决方法: