css-浮动详解(一)_html/css_WEB-ITnose
我写博客的目的呢就是,一呢,总结自己学过和运用的的技术和知识,系统的梳理知识点和原理,加深印象;二呢,报着学习交流的态度,希望大家多多督促,有什么讲的不对的地方欢迎指出啦!当前是为了一份更好的更适合自己的job,find好的工作机会啦!
我相信,一步步的坚持下去,会成为一个优秀的前端程序媛!哈哈!
第一次写博客,虽然接触css许久,也有过许多的HTML+css页面开发的项目经验,但是对float浮动这个原理有时候还是那么是懂非懂得样子,今天我就系统的梳理下浮动相关的知识,献丑啦!
了解float之前先简单的了解下什么是文档流。
文档流:文档流是文档中可显示对象在排列中所占用的位置。通俗的说,将窗体自上而下分成一行一行,并在每行中按从左到右挨次排放元素,即为文档流。
比如网页的div标签它默认占用的宽度位置是一整行,p标签默认占用宽度也是一整行,因为div标签和p标签是块状对象。网页中大部分对象默认是占用文档流,也有一些对象是不占用文档流的,比如表单中的隐藏域。
浮动的定义:
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。---《w3c》,通俗的说,就是浮动元素漂浮的普通流之上。
CSS 中所有的float属性
clear | 指定不允许元素周围有浮动元素。 | left right both none inherit | 1 |
float | 指定一个盒子(元素)是否可以浮动。 | left right none inherit | 1 |
CSS的float特征(简洁的总结了一下):
1:使块元素在一行显示;
2:使内嵌元素支持宽高;
3:不设置宽度的时候宽度由内容撑开;
4:脱离文档流
5:提升层级半层
下面详细分解float:
demo1:设置元素float:left
css_float div1div2span1 span2
上一篇: OSX as Transparent Wifi MITM Proxy
下一篇: VS中利用ASP.net做网站,使用Gridview显示数据列表,用IIS发布后,在IE浏览器和360浏览器中看到样式不一样求高手指教!_html/css_WEB-ITnose
推荐阅读
-
html综述一 jQuery基础使用(动态在body中创建div节点)_html/css_WEB-ITnose
-
一种让 IE6/7/8 支持 media query 响应式设计的方法_html/css_WEB-ITnose
-
请大家帮忙分析一下这个软件的交互原理_html/css_WEB-ITnose
-
CSS-如何使div内的对象下对齐?_html/css_WEB-ITnose
-
打印时,内容与标题有一块空白内容_html/css_WEB-ITnose
-
后端码农谈前端(CSS篇)第一课:CSS概述_html/css_WEB-ITnose
-
问一个简单的css滚动条宽度兼容IE7和IE6的问题._html/css_WEB-ITnose
-
为啥我写的active第一个按钮没高亮?_html/css_WEB-ITnose
-
我想给网站设计一个Logo,设计灵感一般来源于哪? 一般Logo设计步骤是怎么样的?_html/css_WEB-ITnose
-
iframe的问题,如何让另一个iframe刷新_html/css_WEB-ITnose