float 浮动详解
浮动(float):浮动原先设定时主要是用于文本环绕图像设定的,后来发现其在css布局中有很大的帮助,故渐渐使用浮动。
浮动后的元素脱离了文档的普通流,使得浮动的元素不占据文档的位置,其他元素可以覆盖其位置。
浮动元素不影响块框元级元素布局,但是可以影响内联元素(主要是文本)布局。(即浮动元素不占据文档流位置,不影响其他元素布局,但是浮动元素的内联元素如:文本等会改变其布局)
如图:块1浮动,块2 没有浮动,其位置在块一处(被覆盖:浮动元素不占据文档流位置),但是其内联的文本却在其原本的位置(浮动元素的内联元素布局改变)。
浮动的文本环绕:文本的位置会占据#A的位置,但是其文本会始终环绕在浮动元素A附件。
- #A {
- float:left;
- width:200px;
- height:200px;
- background:#C00;
- }
- #B {
- width:480px;
- height:230px;
- 10. background:#000;
浮动的弊端(高度塌陷): 如果父元素只包含浮动元素,且父元素未设置高度和宽度的时候,那么它的高度就会踏缩为零。
浮动的删除:1.clear:both ----如果浮动较多,会有很多<div class=’clear’></div>
2.在容器中使用overflow:auto或者hidden
3.给浮动的容器也添加浮动 float -------这样会使容器也带有浮动,影响整体布局
4.使用伪类元素 :after 在其容器中添加新样式 -------推荐使用,可复用性高
<div class="container clearfix">
<div class="block1"><span>块1</span></div>
<div class="block2"><span>块2</span></div>
<div class="block3"><span>块3</span></div>
</div>
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
float 浮动详解的更多相关文章
- mysql float类型详解
mysql float类型详解float类型长度必须设置3以上 不然会报错 out of range如果设置3 就只是 整数+小数的长度 比方说3.23 3.2等等 3.333就不行了 4位了
- CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性
最近刚好碰到这个问题,看完这个就明白了.写的很好,所以转载了! CSS清除浮动_清除float浮动 CSS清除浮动方法集合 一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里 ...
- CSS position overflow float 属性 详解
position overflow float 几个属性比较容易混淆,写一段代码详解各自具体情况: position在w3school的可能取值: 值 描述 absolute 生成绝对定位的元素,相 ...
- CSS系列 (05):浮动详解
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. -- W3C 文字环绕 float可以 ...
- 彻底理解浮动float CSS浮动详解 清除浮动的方法
我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流. 注意:标准流使我们网页布局中最稳定的一种结构 ...
- CSS基础之浮动属性float图文详解
宏观地讲,我们的web页面的制作,是个“流”,必须从上而下,像“织毛衣”. 标准流里面的限制非常多,导致很多页面效果无法实现.如果我们现在就要并排.并且就要设置宽高,那该怎么办呢?办法是:超脱 ...
- CSS3定位和浮动详解
本文为大家分享CSS3定位和浮动的基础概念,与使用方法,供大家参考,具体内容如下 一.定位 1. css定位: 改变元素在页面上的位置 2. css定位机制: 普通流: 浮动: 绝对布局: 3. cs ...
- float属性详解
内容: 1.block与inline复习 2.float介绍 3.float作用 4.清除浮动 1.block与inline复习 1 block元素是独立的一块,独占一行 2 多个block元素会各自 ...
- css float属性详解
定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.如果浮动非 ...
随机推荐
- checkbox判断选中的三种方法
方法一: if ($("#checkbox-id")get(0).checked) { // do something } 方法二: if($('#checkbox-id' ...
- Day7上
T1 部分分 枚举某个数 100 离散化.或 map 相对了不知道呢过不能过. T2 逆序对,不知对不对 归并排序,
- 关于基于Linphone的视频通话Android端开发过程中遇到的问题
关于基于Linphone的视频通话Android端开发过程中遇到的问题 运用开源项目Linphone的SDK进行开发,由于是小组进行开发,我主要负责的是界面部分. 由于当时是初学Android开发,对 ...
- Web前端开发规范(二)
3.HTML代码规范 .html文件必须存放在项目工程约定的目录中. .html文件的命名:以模块 + 功能的结合方式来命名,比如:newsList.html. 文档类型声明:HTML4中使用< ...
- 2018.9.8pat秋季甲级考试
第一次参加pat考试,结果很惨,只做了中间两道题,还有一个测试点错误,所以最终只得了不到50分.题目是甲级练习题的1148-1151. 考试时有些紧张,第一题第二题开始测试样例都运行不正确,但是调试程 ...
- 如何计算并测量ABAP及Java代码的环复杂度Cyclomatic complexity
代码的环复杂度(Cyclomatic complexity,有的地方又翻译成圈复杂度)是一种代码复杂度的衡量标准,在1976年由Thomas J. McCabe, Sr. 提出. 在软件测试的概念里, ...
- Selenium入门10 弹出框的处理 switch_to.alert
三种弹出框alert(一个按钮),confirm(两个确认,取消),prompt(两个按钮+输入框). 切换到弹框: switch_to_alert() 新版的selenium用: brows ...
- HTML入门1—HTML基础学习
html文档结构 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- 四大CPU体系结构ARM、X86/Atom、MIPS、PowerPC
http://blog.csdn.net/wangjianno2/article/details/52140936 RISC(reduced instruction set computer,精简指令 ...
- LCA最近公共祖先(POJ1330)
题目链接:http://poj.org/problem?id=1330 解题报告: 先将一个子节点,深搜每一个根节点,并标记. 然后深索另一个子节点,当发现访问过了,就找到了最近的公共祖先. #inc ...