【css学习笔记】深入理解之float
来源:互联网 发布:计算机专业英语软件 编辑:程序博客网 时间:2024/05/22 13:10
大四正在找工作的前端小白一枚,写文章的目的是让自己记忆更加深刻,有不严谨、错误的地方欢迎指正,一定虚心学习请教,谢谢。
(一)关于float属性的几个特性如下:
1、float属性最开始出现的目的是为了处理图文环绕的效果,因此它具有环绕性。
2、使用float的元素会自动加上一个块级框,可以像块元素一样设置宽高。
3、设置了float属性的元素会导致其父元素的坍塌,因此它具有破坏性。
(二)关于清除浮动的几个方式:
1、利用clear属性清除浮动。利用clear属性清除浮动的方式又分为两类,(1)在文档结构中添加空标签;(2)利用after伪类清除浮动。其中以使用伪类清除浮动更为常见,具体代码如下:
.clearfix:before,
.clearfix:after
{
display: table;
content: " ";
}
.clearfix:after
{
clear: both;
}
.clearfix{zoom:1;} //兼容IE6、7
(三)关于clear清除浮动带来的后遗症
html结构:
css样式:
效果:
这是一个很常见的效果,左边的盒子设置了浮动,右边大盒子外层只设置了颜色,右边大盒子内部的标题设置了左浮动,但是右边大盒子内部的标题并没有设置高度,从效果图可以看到右边大盒子的高度和左边盒子一样高。
这个问题出现的原因在于clear的特性,W3C官方文档对于利用clear清除浮动的原理的解释大概是:我们之所以能够使用clear解决float引起的父元素塌陷问题,其实就是因为加了clear的空标签(或者是伪类),把空标签的top值设置在了浮动元素的bottom边缘下方,从而能够撑起父元素。示意图如下:
(四)解决clear带来的后遗症
1、使用position,避开浮动的问题;
2、为右边大盒子设置overflow:hidden或者auto,从而隔离clear的作用范围,构成BFC(BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素)。
- 【css学习笔记】深入理解之float
- css之float的深入理解
- CSS深入理解之float浮动
- CSS-深入理解之float浮动
- CSS深入理解之float浮动
- css学习笔记之float
- CSS学习笔记---float的深入剖析
- css之float深入剖析
- css 学习笔记 position float block 的理解
- CSS深入理解的学习笔记
- CSS 属性 overflow 深入理解学习笔记
- 【转】CSS FLOAT 学习笔记
- 《深入理解C#》学习笔记之第一章
- 深入理解Android之Gradle学习笔记
- web开发之css float的理解
- CSS学习笔记----float简单实现
- CSS深入理解之overflow
- CSS深入理解之relative
- BZOJ 2789: [Poi2012]Letters
- 四.Android六种布局详细讲解
- 2017年OWASP十大安全漏洞
- 卷积神经网路综述
- 读取配置文件信息
- 【css学习笔记】深入理解之float
- 关于Python第三方库用pip安装缓慢的问题
- 最全的常用正则表达式大全——包括校验数字、字符、一些特殊的需求等
- iframe内嵌网页宽度自适应样式设置
- ChemOffice.
- webpack.config.dev.js中配置less
- Spring Bean的作用域(Scope)的原理及源码解析
- 3. Longest Substring Without Repeating Characters leetcode java
- 1.安装环境