html float属性both,CSS——float属性及Clear:both备忘笔记
通过指定CSS属性float的值,从而使元素向左或向右浮动,然后由后继元素向上移动以填补前面元素的浮动而空出的可用空间。CSS的float属性,作用就是改变块元素对象的默认显示方式,HTML标签设置了float属性之后,它将不再独自占据一行,从而可以实现多个元素同处一行的效果。Float的功能很强大,但是如果没有好好掌握而使用很可能会成为你调试样式的噩梦。
使用Float样式,如果没有清除浮动,那么有浮动元素的父元素容器将无法自动撑开。如果没有清除内部浮动,此时会导致浮动的父元素无法自动撑开到本身应有的高度。也就是说:当一个元素是浮动的,如果没有关闭浮动时,其父元素不会包含这个浮动元素,因为此时浮动元素从文档流中脱离。
所以需要在样式定义的后面进行清除浮动,清除浮动的方法有几种:
Clear:both清除浮动
clear清除浮动主要是借用clear属性来清除浮动,这是一种比较陈旧的清除浮动方法,但是感觉一般遇到这种问题都会用这种方法去清除浮动。使用clear:both来清除浮动,我们需要在需要清除浮动地方的后面紧接着增加一个额外元素,比如说一个div标签,并且定义他们的样式为“clear:both”,其通常使用的结构方式如下:
复制代码代码如下:
复制代码代码如下:
.clear {
clear:both;/*主要使用这个属性来清除浮动*/
/*为了不让ie具有一定的空间,个人建议加上下面三个属性*/
height: 0;
line-height: 0;
font-size: 0;
}
2.使用overflow
用overflow方法来清除浮动相对来说比较简单,只需要在有浮动的元素上面加上下面的属性:
.A {
overflow: auto;
zoom: 1;/*在IE下触发其layout,也要以使用_height:1%来代替zoom*/
}
使用overflow属性来清除浮动有一点需要注意,overflow属性共有三个属性值:hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动,但切记不能使用visible值,如果使用这个值将无法达到清除浮动效果,其他两个值都可以。
对于overflow属性清滁浮动我们还可以这样应用:
.A {
overflow: auto;/*除IE6以及其以下版本不识别之外,其他浏览器都识别*/
}
* html .A {
height: 1%; /* IE5-6 */
}
3.clearfix方法
这种方法清除浮动是现在网上最拉风的一种清除浮动,是利用:after和:before来在元素内部插入两个元素块,从而达到清除浮动的效果。其实现原理类似于clear:both方法,只是区别在于:clear在html插入一个div.clear标签,而clearfix利用其伪类clear:fix在元素内部增加一个类似于div.clear的效果。下面来看看其具体的使用方法:
HTML Code:
使用clearfx来清除浮动最主要掌握一点,需要在有浮动元素的父元素中加入一个叫clearfix的class名称,比如说我们这个例子,我们需要在div.A中加入一个clearfix的class名。接着在给这个clearfix加上样式
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */
其实只使用clearfix:after就可以达到清除浮动的效果,但只使用clearfix:after时在跨浏览器兼容问题会存在一个垂直边距叠加的bug,所以为了让浏览器兼容这个clearfix的清除浮动,在原来的基础上加止clearfix:before,这样就解决了跨浏览器的兼容问题。
在这么多种清除浮动的方法中,都没有离开最原始的clear:both方法,特别是clearfix:after清除浮动,完全就是clear:both的一种变身,区别在于不需要在html增加一个标签,而只需要在有浮动元素的父元素中加上一个clearfix的class名,这样就轻松解决了清除浮动的问题。
html float属性both,CSS——float属性及Clear:both备忘笔记相关推荐
- html float属性6,CSS float 浮动属性
本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...
- CSS——float属性备忘笔记
通过指定CSS属性float的值,从而使元素向左或向右浮动,然后由后继元素向上移动以填补前面元素的浮动而空出的可用空间.CSS的float属性,作用就是改变块元素对象的默认显示方式,HTML标签设置了 ...
- css中float详解,CSS浮动属性Float详解?史上最全Float详解
我们在学习css样式的时候,都知道css是盒概念,并且每一个盒子都是一个元素,下面我们就对CSS浮动属性Float进行详解,让你彻底了解Float. 一:什么是Float浮动? Float浮动是css ...
- 前端:CSS/10/伪类选择器,CSS列表属性,CSS边框属性,CSS内边距属性,CSS背景属性
CSS伪类选择器:给超链接加的样式(链接的不同状态加样式) 一个超链接,有四个状态: 正常状态(:link):鼠标没放上去之前的样式: 放上状态(:hover):鼠标放到链接上时的样式: 激活状态(: ...
- 前端:CSS/09/行内框架,CSS简介,CSS选择器,组合选择器,CSS注释,CSS尺寸属性,CSS字体属性,CSS文本属性
内嵌框架(行内框架,浮动框架) 语法格式:<iframe 属性="值">不支持时的提示信息</iframe> 描述:内嵌框架,相当于在现有的网页中,挖了一个 ...
- css字体属性和css文本属性
字体属性和文本属性 css字体属性 color属性:设置文字颜色 值类型: 关键词:red,green- 十六进制:#000,#fff rgb(255,255,255) font-size属性:定义文 ...
- html字体怎么是什么属性,你不知道的CSS字体属性
原标题:你不知道的CSS字体属性 如果你对于CSS技巧没有深入地了解,这篇文章会让你知道一些控制字体加载的技巧. CSS的字体显示属性在Blink-based浏览器中可以被使用.它使你能够发现浏览器的 ...
- css学习(第一天)(css基础选择器,css字体属性,css文本属性,css引入方式)
CSS第一天 1.css简介 1.1 html的局限性 1.2 css-网页的美容师 1.3 css语法规范 1.4 css代码风格 1.4.1 样式格式书写 1.4.2 样式大小写风格 1.4.3 ...
- css中_box的属性包括,css box-sizing 属性
box-sizing:content-box | border-box 适用于:所有接受 和 的元素 content-box: padding 和 border 不被包含在定义的 width 和 he ...
最新文章
- python微信库wxpy_使用wxpy这个基于python实现的微信工具库的一些常见问题
- C++实现线程安全的单例模式
- idea安装lua插件_KONG网关 — 插件开发
- PhpMyAdmin后台getshell
- CentOS7.0安装Nginx 1.7.4
- 深度学习之RetinaNet
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- Error creating bean with name ‘entityManagerFactory‘ defined in class path resource解决方案
- TypeError: keys must be str, int, float, bool or None, not tuple,解决 python 中 json 保存不了字典键值为 元组 的问题
- HDU1412 {A} + {B}【排序+集合合并】
- dp HDU - 5074
- Servlet初步认识(一)
- openCV中sobel边缘增强
- windows截图快捷键
- 软件测试-Mysql数据库3
- 云函数+微信公众号到个人微信
- 中国商贸物流行业运行状况分析及投资规模预测报告2021-2027年
- 统计一行字符串中单词的个数
- 关于测试流程你知道吗
- 网络上的计算机之间又是如何交换信息的。(TCP/IP协议、IPX/SPX协议、NetBEUI协议)