div的浮动(float)
什么是浮动
浮动，故名思议，就是移动位置。
之所以不叫移动，而叫浮动，那是因为给元素设置浮动后，元素会浮到文档上面来，术语叫脱离文档流。
例子
下面我们看例子
<html><head><style>#div0 {/* 设置背景色为黄色 */background-color:yellow;/* 设置边框为1px的线条 */border:1px solid;/* 设置宽度为800px */width:800px;}#div1, #div2 {/* 设置宽度为300px */width:300px;/* 设置高度为300px */height:300px;/* 设置边框为1px的线条 */border:1px solid;}#div1 {/* 设置背景色为灰色 */background-color:#888;}#div2 {/* 设置背景色为蓝色 */background-color:#08c;}</style></head><body><div id="div0"><div id="div1"></div><div id="div2"></div></div></body></html>
有三个div，其中一个大的#div0，里面含有两个子div，#div1和#div2。
可以看到，大的黄色#div0，嵌套了一个灰色的#div1和一个蓝色的#div2。
由于div是块级元素，所以灰色和黄色的div不会在同一排显示。
测试1
这个时候，我们给#div1，设置右浮动。
#div1 {/* 设置背景色为灰色 */background-color:#888;/* 右浮动 */float:right;}
这个时候，可以看到，灰色的#div1到右边去了。
而黄色#div0的高度，只有一半了。
这是因为，当#div1浮动到右边后，它就脱离文档流了，来到文档的上方，也就是和原来的#div0、#div2不在同一个层面上了。
这时候，#div0的高度，就等于是现在还在同一层面上#div2的高度。
测试2
我们再给#div2做个左浮动
#div2 {/* 设置背景色为蓝色 */background-color:#08c;/* 左浮动 */float:left;}
发现#div0居然不见了，但是可以图片顶部，出现#div0的边框。
这是由于，#div1和#div2都设置了浮动，它们都脱离了文档流，和#div0不在同一个层面上了。
也就是#div0里面没有了内容，就坍塌的只剩下边框了。
测试三
如果你需要#div0也有一个高度 ，刚好能包裹着浮动的子元素，那么你可以给#div0也设置一个浮动，这样他们就又在同一个层面上了。
#div0 {/* 设置背景色为黄色 */background-color:yellow;/* 设置边框为1px的线条 */border:1px solid;/* 左浮动 */float:left;}
div的浮动(float)的更多相关文章
- DIV设置浮动float以后下一个DIV要换行的方法
<div style=“float:left;”> 1111111 </div> <div style=“float:left;”>222222 </div& ...
- 【html】【6】div浮动float
我想 当看完上面的必看链接,拥有一定的基础后也得7天左右, 记住 一定要看完,知道它都有什么,没学会不要紧,哪怕只是有个简单的概念也行, 随着后续的使用慢慢深入学习,现在开始div布局. 必看参考: ...
- CSS浮动(float,clear)通俗讲解
首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...
- 经验分享：CSS浮动(float,clear)通俗讲解
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...
- 关于浮动float属性和position:absolute属性的区别
最近返回头看了很多书籍,一直在纠结float属性和absolute绝对定位的区别和使用的情况,给大家分享一下自己的心得和体会吧. 1,float属性 float属性意义是让元素拜托独占一行的霸道总裁, ...
- 经验分享：CSS浮动(float,clear)通俗讲解(转载)
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...
- CSS学习笔记——CSS中定位的浮动float
昨天在解决了盒模型的问题之后又出现了新的知识模糊点:浮动和绝对定位?今天先解决浮动相关的问题,首先列举出想要解决的问题: 1.浮动到底是怎么样的? 2.浮动对元素的影响有什么? 3.浮动主要用来干什么 ...
- 经验分享：CSS浮动(float,clear)通俗讲解 太棒了，清晰明了
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...
- 彻底理解浮动float CSS浮动详解 清除浮动的方法
我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流. 注意:标准流使我们网页布局中最稳定的一种结构 ...
随机推荐
- 适配器设计模式初探（Java实现）
本篇随笔主要介绍Java实现设配器设计模式. 先来看下待解决的问题: (图片转自http://blog.csdn.net/jason0539) 由上图的情况可知,欧洲壁式插座只有三足插口,如果我们想要 ...
- Python数组（一）
一.索引 数组中的索引(下标)是从0开始递增的,你可以像下面这样使用编号来访问各个元素: test=['java','C#','C++','html','Spring'] print(test[0]) ...
- 解决三星官方移植的内核默认是没有打开支持V4L USB devices
在linux比较新的kernel,都标配了各类摄像头的驱动支持,不用我们自己移植驱动,只需通过make menuconfig配置内核支持我们所需的摄像头类型即可.以下是在三星官方内核中配置V ...
- js按回车事件提交
$(document).keyup(function (event) { if (event.keyCode == "13") { document.getElementById( ...
- CF351A Jeff and Rounding 思维
Jeff got 2n real numbers a1, a2, ..., a2n as a birthday present. The boy hates non-integer numbers, ...
- Go语言构建json和解析json实例
参考网址如下: https://www.cnblogs.com/fengbohello/p/4665883.html
- my01_Mysql router 安装
Mysql router 主要用途是读写分离,主主故障自动切换,负载均衡,连接池等.安装如下 下载地址:https://dev.mysql.com/downloads/router/ tar -zxv ...
- CSS十问——好奇心+刨根问底=CSSer（转）
最近有时间,想把酝酿的几篇博客都写出来,今天前端小学生带着10个问题,跟大家分享一下学习CSS的一些体会,我觉得想学好CSS,必须保持一颗好奇心和刨根问底的劲头,而不是复制粘贴,得过且过.本人能力有限 ...
- SparseArray替代HashMap来提高性能
SparseArray是 Android框架独有的类,在标准的JDK中不存在这个类.它要比 HashMap 节省内存,某些情况下比HashMap性能更好,按照官方问答的解释,主要是因为SparseAr ...
- 晶振电路的设计-AN2867学习
一 石英晶体的等效电路.带宽: FS~FA之间就是并联带宽,越窄稳定性越好.其中Fs.Fa为Lm/Rm/Cm电抗分别为0和无穷大时的谐振频率).Fp为工作频率(通过调整负载电容CL来达到中心频率) 起 ...