关于div布局中float的使用

　　为什么要浮动呢？我是这么认为的。

　　Css里有两种对象（好像有3种的，但是主要用两种）就是块级元素和内联元素；

Div就是块级元素，一个div占据一行，有两个div就需要用到两行，但是我们通常用div来布局，这就需要用到浮动。

　　要达到这样的效果就需要用左浮动float:left；

　　css设置为：

.left{ float:left }

这样三个div就依次从左向右进行排列（当然这是在宽度足够的情况下，如果宽度不够，那个div3就要被挤到下一行去了）。同理：float:right 就是从右往左排了。

　　但是如果这3个div下面还有第四，第五个div，我们又不需要它们向上图一样从左往右排列，想要恢复成块级元素那样，一个div占一行的情况，那么我们就需要用到clear属性。

　　css设置为：

.clearFloat{ clear:left;}

我们经常看到很多直接用clear:both，这个就是指把两个浮动（left和right）都清除掉，恢复成块级元素的特征。　

　　另外，还有一种内联元素，比如span，它就不是一个元素占一行，有多个span的话，它们就分布在同一行。但是为什么不能用span来布局呢，因为内联元素不能设置高度，就是一个行的高度。

转载于:https://www.cnblogs.com/moonflower/archive/2010/01/15/1648366.html

关于div布局中float的使用相关推荐

HTML5中div布局的float属性
今天在看div布局的时候讲到了利用float属性来实现元素的浮动,一开始搞得不是很明白,现总结如下: 无论如何,div是一种块元素,每个元素铁定会占一行,无论当前行是否已经用完了,也就是所谓的&quo ...
html div 内部左右布局,div布局大全
div+css布局还有哪些布局方式 LZ说的框架是不是frame,框架适用于后台管理界面,一般顶部或左侧是功能菜单,右侧是内容显示页面而DIV+CSS是前台界面各模块设计,两者没交集, html 用d ...
HTML用于布局网页页面的元素,HTML div布局标签元素
标签元素 HTML div标签认识,如何使�?strong>DIV标签教程�?/p> 常常大家�?a href="//www.css5.com.cn/">DIV ...
android的文本框内容居中显示图片,DIV+CSS中让布局居中_背景图片居中_文字内容居中...
在DIV CSS布局的页面里,从布局内容到页面里文章文字居中都是非常重要的,而 1.首先介绍使用css属性让整体布局的居中: 设置对象的父级内容居中,这里一个页面的为父级是什么呢?我们可以想象整个页面 ...
DIV CSS布局中绝对定位和浮动用法
转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...
结合html和css制作页面的布局结构,CSS Div网页布局中的结构与表现
在Web标准中一个很重要的概念就是强调页面的结构与表现分离.说的通俗一点就是XHTML中应该没有样式化的东西,而且Web在浏览器中除内容外都应该由CSS表现,这包括布局与其它样式.一旦一个标准的XHT ...
Div+CSS布局入门教程(五) 页面制作-用好border和clear 附加：1.DIV+CSS设计原则 2.DIV+CSS中标签ul ol li dl dt dd用法
这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性. 首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其 ...
css中div布局学习（1）
看完慕课网中的div布局,简单记录一下里面的内容: 1.实现效果: 上面实现效果主要是考虑如何实现块元素居中的问题,关键代码: margin: 0 auto; 实现代码: <!DOCTYPE h ...
html设置div靠左,float:left css浮动靠左布局靠左
首先float是组织网页浮动(对象靠左left.靠右right)样式属性单词.在构造中咱们要让对象靠左显现只要求对对象设置float:left款式即可. 一.float left语法 1.float: ...

关于div布局中float的使用

关于div布局中float的使用相关推荐

最新文章

热门文章