好久没来写东西了,今天补充下css方面。
先要理清的是为什么要清除浮动:
在使用float后父容器(没有设置height情况时)并没有包裹住这两个层,我们只能说,父容器不知道这两个层的高度,从而使得这两个层溢出了父容器,脱离了文档流,这也就是我们为什么要在浮动之后,让父容器识别出内部元素的高度,要清除浮动的原因。
引用
1.浮动元素会从文档正常流中删除,但它仍会影响布局。
2.浮动非替换元素必须为其指定width,否则元素的width会趋于0而导致浮动元素不能完整显示。
3.一旦元素具有了浮动属性,它便成为了一个块级元素。
4.浮动元素的左右外边界不能超出包含块的左右内边界。
5.浮动元素永不会重叠。
6.浮动元素不会超过容器的上padding。
7.后浮动的元素永不会超过先浮动元素的顶端。
8.浮动元素会尽可能高地放置,便这个高受限于规则6和规则7。
9.浮动元素的下边界没有要求,因此当容器不足以容下浮动元素时,浮动元素会向下延伸。但部分浏览器会采取增大容器高度以容下浮动元素,而对于符合CSS2.1规范的浏览器要想让容器容下浮动元素的一个可行方法是:让容器也浮动。
10.浮动元素向下延伸时,不会影响正常文本的显示,文本会相对于浮动元素进行偏移。但部分文本背景会被浮动元素遮住。
11.如果浮动元素设置了负的外边距、这将破坏规则4、6、7。
12.当浮动元素的width>容器的width时,这会使得浮动元素超出容器的左右边界(超左超右依浮动方向而定)。
13.浮动重叠规则:行内框(如strong)与浮动元素重叠时,其边框、背景、内容均位于浮动元素之上;块框与浮动元素重叠时,其边框、背景在浮动元素之下,而内容在浮动元素之上。
14.对某个元素应用clear:left,意味着这个元素的左边不能有浮动元素。
15.clear不能用于非块级元素,比如<br/>,在大多数浏览器看来它是一个非块级元素,因此如果对br应用clear来清除浮动不会有任何效果,除非改变br的display:block。
16.如果某元素应用clear清除浮动,则此元素设置的上外边距值会被忽略,但会有一个重新计算的上外边距值(甚至可能为0).如果希望此元素与浮动元素之间有一个明确的间隔,可以在浮动元素上设置下外边距。
参考:
http://www.75team.com/archives/357?utm_source=rss&utm_medium=rss&utm_campaign=%25e5%25a4%25a7%25e8%25af%259dfloat
分享到:
相关推荐
css浮动和定位
CSS浮动属性Float详解 什么是CSS Float?
web前端+css命名 规范
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
前端学习 html css js 算法前端学习 html css js 算法前端学习 html css js 算法 前端学习 html css js 算法前端学习 html css js 算法前端学习 html css js 算法 前端学习 html css js 算法前端学习 html css js ...
CSS2中文参考手册+CSS浮动 CSS2中文参考手册+CSS浮动
浮动f
网页前端的css笔记,对于java程序员,前端也要学习一下,所以html,css必不可少
内容概要:2023前端HTML+CSS最全面试题汇总,前端知识点全部覆盖,保你面试无忧。在手写Spring 源码的过程中会摘取整体框架中的核心逻辑,简化代码实现过程,保留核心功能,例如:IOC、AOP、Bean生命周期、上下文、...
使用 CSS3DRenderer 渲染全景图
DIV+CSS布局:CSS浮动float属性详解 不解释
纯CSS3浮动的小猪动画是一款很可爱的纯CSS3浮动小猪,同时小猪在浮动时投影也会跟着浮动,动画效果非常逼真。
从零开始学前端 - 6. CSS浮动float详解 示例代码 : 她不美却常驻我心 博客地址: https://blog.csdn.net/qq_39506551 CSDN 上传的资源会自动涨积分,如有需要留下邮箱
CSS 浮动
HTML CSS JavaScript教学资料
css浮动有关问题css浮动有关问题css浮动有关问题
web前端CSS题库.docx
html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习...
前端学习 html,css,js前端学习 html,css,js前端学习 html,css,js前端学习 html,css,js 前端学习 html,css,js前端学习 html,css,js前端学习 html,css,js前端学习 html,css,js 前端学习 html,css,js前端学习 html,css,...
前端学习html+css+js前端学习html+css+js前端学习html+css+js 前端学习html+css+js前端学习html+css+js前端学习html+css+js 前端学习html+css+js前端学习html+css+js前端学习html+css+js 前端学习html+css+js前端...