浮动与清除浮动

浮动 float半脱离文档流(对元素,脱离文档流;对内容,在文档流) 浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。

float:left | right | none | inherit; 浮动的特征: 1、块在一排显示 2、内联支持宽高 3、默认内容撑开宽度 4、脱离文档流 5、提升层级 清除浮动: 1.加高 问题:扩展性不好

2.父级浮动 问题:页面中所有元素都加浮动,margin左右自动失效

3.inline-block 清浮动方法: 问题:margin左右auto失效;

4.空标签清浮动 问题:IE6 最小高度 19px;(解决后IE6下还有2px偏差)

5.br清浮动 问题:不符合工作中:结构、样式、行为,三者分离的要求。

6.after伪元素 清浮动方法(现在主流方法) .clear:after{ display: block; content: ''; clear: both; height: 0; visibility: hidden; overflow: hidden; } .clear{ *zoom:1; }

after伪元素: 元素内部末尾添加内容; :after{content"添加的内容";} IE6,7下不兼容 zoom 缩放 ie6 7兼容

7.overflow:hidden 清浮动方法; 8.position:absolute; 绝对定位元素子级的浮动可以不用写清浮动方法; position:fixed; 固定定位元素子级的浮动可以不用写清浮动方法;(IE6不兼容)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏河湾欢儿的专栏

标签类型

标签类型 块 1.独占一行 2.支持所有样式 3.不设置宽度的时候,宽度撑满整个一行 内嵌 1.可以在一行显示 2.不支持宽高,不支持上下的mar...

1003
来自专栏Android先生

Android开发人员一次搞懂前端BFC原理

BFC全称是Block Formatting Context,即块格式化上下文。它是CSS2.1规范定义的,关于CSS渲染定位的一个概念。

1432
来自专栏软件开发

CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法

一、BFC与IFC 1.1、BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline For...

2768
来自专栏用户2442861的专栏

CSS技巧(一):清除浮动

http://www.cnblogs.com/ForEvErNoME/p/3383539.html

651
来自专栏菜鸟计划

我的HTML总结之常用基础便签

HTML:是Hyper Text Markup Language(超级文本标记语言)的缩写,HTML不是一种程序,只是一种控制网页中数据显示的标识语言。 HTM...

3755
来自专栏web前端

JavaScript基础学习--零碎

1、如果WINDOW对象是常规HTML页面,TOP就是SELF       var top = document.getElementById('top'); ...

2207
来自专栏有趣的django

20.DOM

定义 文档对象模型(Document Object Model)是一种用于HTML和XML文档的编程接口。 查找元素 1.直接查找 document.getEl...

3475
来自专栏web前端

HTML+CSS高级

第一章 ...

7346
来自专栏天天

20171024

1173
来自专栏ppjun专栏

Android十八章:属性动画Android属性动画(第一话)

Android动画能给界面带来很炫的效果,如果我们要实现这些效果,在android3.0版本前实现动画主要有2种方式,帧动画和补间动画。

821

扫码关注云+社区

领取腾讯云代金券