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.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流. 注意:标准流使我们网页布局中最稳定的一种结构 ...
随机推荐
- 【bzoj2190】: [SDOI2008]仪仗队 数论-欧拉函数
[bzoj2190]: [SDOI2008]仪仗队 在第i行当且仅当gcd(i,j)=1 可以被看到 欧拉函数求和 没了 /* http://www.cnblogs.com/karl07/ */ #i ...
- P1919 【模板】A*B Problem升级版（FFT快速傅里叶）
题目描述 给出两个n位10进制整数x和y,你需要计算x*y. 输入输出格式 输入格式: 第一行一个正整数n. 第二行描述一个位数为n的正整数x. 第三行描述一个位数为n的正整数y. 输出格式: 输出一 ...
- P4088 [USACO18FEB]Slingshot 线段树+扫描线
\(\color{#0066ff}{ 题目描述 }\) Farmer John最讨厌的农活是运输牛粪.为了精简这个过程,他产生了一个新奇的想法:与其使用拖拉机拖着装满牛粪的大车从一个地点到另一个地点, ...
- P2117 小Z的矩阵
题意: 给你一个初始01矩阵 三种操作 1.给一个x,把第x行01互换 2.给一个x,把第x列01互换 3.求$(\sum_{i=1}^n\sum_{j=1}^nf[i][j]*f[j][i])%2$ ...
- typeof 和 instanceof
typeof 和 instanceof 都是用来判断类型的函数 typeof 对于原始类型来说,除了 null 都可以显示正确的类型 typeof 1 // 'number' typeof '1' / ...
- boost库checked_delete的使用
在查看boost库时发现一个小文件checked_delete.hpp里面几个小函数,它的作用用很简短的话来说:防止未定义的行为造成delete时的内存泄露.实现如下: template<cla ...
- 使用Tensorflow object detection API——环境搭建与测试
[软件环境搭建] 操作系统:windows 10 64位 内存:8G CPU:I7-6700 Tensorflow: 1.4 Python:3.5 Anaconda3 (64-bit) 以上环境搭建请 ...
- CSS(九)元素隐藏和利弊
隐藏元素.无法点击,这之间有什么关系呢? 可以配合我写的 html 食用:https://github.com/dirstart/ScriptOJ/blob/master/OJ_CSS/4.css%E ...
- 【笔记】MySQL的基础学习（二）
[笔记]MySQL的基础学习(二) MySQL 老男孩 一 视图 视图其实就是给表起个别名 1.创建视图 格式:CREATE VIEW 视图名称 AS SQL语句 CREATE VIEW v1 AS ...
- Should I buy Auro OtoSys IM600 or Obdstar X300 DP?
Auro OtoSys IM600 and Obdstar X300 DP – What’s the difference & Which better? This is for those ...