浮动原理及清浮动笔记
来源:互联网 发布:mongodb删除数据 编辑:程序博客网 时间:2024/05/22 12:22
1. 浮动的定义
一句话解释:元素浮动后,会脱离文档流,接着会按照指定的方向移动,一直到碰到父级的边界或另外一个元素为止。浮动的代码:folat: left/right/none
,none 表示为不浮动,完全没有浮动的效果。
2. 浮动的特性(inline-block的进化版):
- 使块元素在一行显示;
- 使内嵌支持宽高;
- 不设置宽度时,宽度由内容撑开;
- 脱离文档流(文档流是文档中可显示对象在排列时所占用的位置);
- 提升半层层级(元素本身有上下两个半层,下半层为元素本身的属性,比如为元素的边框,背景等;上半层为元素的内容,比如为元素的文字与图片等)。
3. 清除浮动的基本属性
Clear: left/right/both/none
表示的是元素的某个方向不能有浮动元素( both 是元素两边都不能有浮动元素)。
4. 清浮动方法:
- 给父级加高度(存在页面中所有元素都要加高度,麻烦!)
- 给父级也加浮动(存在1.页面中所有元素都要加浮动,麻烦! 2. margin 左右自动失效的问题);
- 给父级加
display:inline-block
(存在 margin 左右自动失效的问题); 在浮动元素下加
<div class="clear"></div>
,并在样式表中加.clear{ height: 0px; font-size: 0; clear: both;}
(存在 IE6 下的最小高度问题):- IE6 下的最小高度问题:在 IE6 下高度小于 19px 的元素,高度会被当做 19px 来处理;
- IE6 下的最小高度问题的解决办法:在样式中加入
font-size: 0;
,但font-size: 0;
最小只能处理 2px 的高度。
在浮动元素下加
<br clear="all"/>
(但是不符合 w3c 原则中的结构、样式、行为,三者分离的要求);给浮动元素的父级加 overflow ,一定要配合
zoom: 1;
(但是 IE6 下不具有包着浮动元素的功能,即没有把元素提升层级的功能,以及 overflow 不支持建立某个元素的子菜单);- overflow 表示的是当内容溢出时的样式,
overflow:auto;
表示的是溢出时显示滚动条;soroll 表示默认显示滚动条;hidden 表示溢出时将内容隐藏。
- overflow 表示的是当内容溢出时的样式,
推荐方法:给浮动元素的父级加以下样式:
.clear{ zoom: 1;}.clear:after{ content: ""; display: block; clear: both;}
5. 不需清浮动的情况
- 在 IE6,7 下浮动元素的父级有宽度就不用清浮动;
- 在 IE6,7 下不支持 after 伪类;
- haslayout :根据元素内容的大小或者父级的大小来重新计算元素的宽高。以下情况会激发 haslayout :
display: inline-block;
height: (任何值除了 auto );
float: (left 或 right);
width: (任何值除了 auto );
zoom: (除 normal 外任意值);
阅读全文
1 0
- 浮动原理及清浮动笔记
- 浮动原理及清浮动笔记
- 浮动及清浮动的方式
- 浮动与清浮动
- 浮动与清浮动
- 清浮动
- 清浮动
- 浮动的工作原理及清除浮动的技巧
- 清浮动的方法
- 04_03.清浮动
- 前端清浮动
- CSS清浮动处理
- css 清浮动
- CSS清浮动方法
- css清浮动方法
- CSS清浮动处理
- 有效清浮动方法
- css-清浮动
- Android 沉浸式状态栏的三种实现方式
- Dlib库介绍(一)
- BigDecimal加减乘除运算
- 反射_程序集_额外补充
- MySQL分区表
- 浮动原理及清浮动笔记
- EasyDSS高性能流媒体服务器前端重构(六)- webpack-dev-server 支持手机端访问
- 字符串匹配问题解决方案之一KMP算法
- 图片标注工具LabelImg使用教程
- register_chrdev & unregister_chrdev
- HTML
- RpgMakerMV源码解析(1)-输入管理
- 谷歌搜索技巧
- 排序算法的Java实现+思路(一):冒泡、快排