HTML5中div布局的float属性

今天在看div布局的时候讲到了利用float属性来实现元素的浮动，一开始搞得不是很明白，现总结如下：

无论如何，div是一种块元素，每个元素铁定会占一行，无论当前行是否已经用完了，也就是所谓的“流”的概念
例如：

<div id="container"><div id="b1">1号块</div><div id="b2">2号块</div><div id="b3">3号块</div><div id="b4">4号块</div>
</div>
样式：
div#container{background-color: grey;width: 100%;height: 200px;
}
div#b1{width: 50px;height: 50px;background-color: red;
}
div#b2{width: 50px;height: 50px;background-color: aquamarine;
}
div#b3{width: 50px;height: 50px;background-color: blueviolet;
}
div#b4{width: 50px;height: 50px;background-color: yellow;
}

结果如下：

如果一个div块被设为浮动的话，它将脱离这个流，自主地去填充这个区域，去靠到最左边或者最右边
比如讲2号块设为向左浮动，为了醒目，将3号块的长度变长了

div#container{margin: 0px;background-color: grey;width: 100%;height: 500px;
}
div#b1{width: 50px;height: 50px;background-color: red;
}
div#b2{width: 50px;height: 150px;background-color: aquamarine;float: left;
}
div#b3{width: 50px;height: 250px;background-color: blueviolet;
}
div#b4{width: 50px;height: 50px;background-color: yellow;
}

效果如下：

如果将连续的两个块设为浮动的话，他们都将和流中的上一个元素的下边沿对齐，并且靠后的那个浮动元素（假设两个浮动元素都是向左浮动的）会靠在前面那个元素的左边。如果空间不够，则会被挤向下一行。
比如：

div#container{margin: 0px;background-color: grey;width: 100%;height: 500px;
}
div#b1{width: 50px;height: 50px;background-color: red;
}
div#b2{width: 50px;height: 150px;background-color: aquamarine;float: left;
}
div#b3{width: 50px;height: 250px;background-color: blueviolet;float: left;
}
div#b4{width: 50px;height: 250px;background-color: yellow;
}

效果图如下（为了不被挡住，将4号块的长度伸长为250Px）：

当然，也可以向右浮动。这样的话，排在前面的元素会更靠右，后面的元素会更靠左。
还有一点要注意，就是元素的id必须以英文字母开头，否则识别不到。

HTML5中div布局的float属性相关推荐

html5中audio播放器标签属性整理
html5中audio播放器标签属性整理 HTML5 元素 audio播放器隐藏 audio标签控制函数功能说明 audio 可脚本控制的特性值只读属性属性说明 HTML5 元素元素是一个 HTM ...
[html] html5中的meta标签http-equiv属性有什么作用？
[html] html5中的meta标签http-equiv属性有什么作用? http-equiv是http5新增的属性,用于把 content 属性关联到 HTTP 头部,可模拟响应头.例如:con ...
android linearlayout属性大全,Android中LinearLayout布局的常用属性总结读书笔记
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 原CSDN博客已弃用,文章会逐渐迁移过来. 应朋友们反馈的Android基础薄弱的问题,决定出一套Android基础教程 ...
html语言 section type,HTML5中div、article、section的区别及使用介绍
最近正在学习html5,刚接触html5,感觉有点不适应,因为有一些标签改变了,特别是div, section article这三个标签,查了一些资料,也试着用html5和css3布局网页,稍微有点头 ...
CSS中的Position、Float属性的一些深入探讨
为什么80%的码农都做不了架构师?>>> HTML布局的基本要点: 如果要掌握.运用好Position.Float属性必须要对HTML的两个基本点有清晰的了解. 盒子模型(bo ...
CSS中div的浮动float
------------------------------CSS中div的浮动float----------------------------------- HTML页面的标准文档流(默认布局)是 ...
多列网页布局CSS float 属性和 CSS Clear 属性
CSS float 属性 CSS float 属性用于设计多列网页布局.如果你想设计两列或三列的网页布局,你必须在float 属性的帮助下浮动你的 div 元素. div 标签是块级元素,因此,div ...
html5中div怎么横着写,html5:div 横向排列的方法
div 横向排列的方法. 以下面这组 div 为例,wrap 的高度由内容撑开 div1 div2 div3 平时是这样的,上下排列~ float 浮动 #div1{ float: left; } # ...
html5干货,干货：详解HTML5中常见的五大全局属性
HTML5中新增了"全部属性"的概念.所谓全局属性它是指可以对任何元素都可以使用的属性,今天为大家详细介绍三种常见的全局属性. contentEditable属性 contentE ...

HTML5中div布局的float属性

HTML5中div布局的float属性相关推荐

最新文章

热门文章