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 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.如果浮动非 ...
随机推荐
- java环境下wsimport编译Wsdl
使用命令提示符进行操作:首先CD至java jdk/bin目录下.先bin目录下执行以下命令即可: -----------------------------服务需求放置的位置------------ ...
- sublime介绍常用插件和快捷键
简介 Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来的,它最初被设计为一个具有丰富扩展功能的Vim. 是一个跨平台的编辑器,同时支持Windows.Linux.M ...
- Design Pattern ->Bridge
Layering & Contract Philosophy With additional indirection. class CWindowImp { public: virtual v ...
- ASP.NET MVC 音乐商店 - 1 创建项目
我们的项目从在 Visual Studio 中的文件菜单中选择“新建”,选择“项目”开始. 然后,选择 C# 中的 Web 模板组,在右边的项目模板中选择 ASP.NET MVC3 Web 应用程序, ...
- 关于Android Studio中的一个小问题——R文件引用Id失败
错误情况: 今天使用AS建立了一个新的EmptyProject,结果出现错误 setContentView(R.layout.activity_main); R文件的引用Id失败.真的是莫名奇妙... ...
- 【起航计划 028】2015 起航计划 Android APIDemo的魔鬼步伐 27 App->Preferences->Launching preferences 其他activity获取Preference中的值
前给例子介绍了如何使用PreferenceActivity 来显示修改应用偏好,用户对Preferences的修改自动存储在应用对应的Shared Preferences中. 本例介绍了如何从一个Ac ...
- Struts2_HelloWorld_7_1
大致了解应用的运行过程: 由请求路径开始,浏览器端通过URL向tomcat发送http请求(如:http://localhost:8080/Struts2_0100_Introduction/hell ...
- 《spring技术内幕》读书笔记(1)——什么是POJO模式
今天在看<spring技术内幕>,第一章中多次提到了使用POJO来完成开发,就百度了一下,在此保留 1. 什么是POJO POJO的名称有多种,pure old java obje ...
- 前端怎样学习react
这是一个很长的话题.....慢慢写
- DEEP LEARNING 大满贯课程表
Reinforcement Learning post by ISH GIRWAN Courses/Tutorials Deep Reinforcement Learning, Spring 2017 ...