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.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流. 注意:标准流使我们网页布局中最稳定的一种结构 ...
随机推荐
- C语言和sh脚本的杂交代码
在网上看到了一个把 C语言和bash杂并起来的例子,这个示子如下所示.在下面这个例子中,我们把脚本用#if 0这个预编译给起来,这样就不会让其编译到C语言中了. #if 0 echo "He ...
- 咕咕（数位dp+AC自动机）
咕咕(数位dp+AC自动机) 若一个字符串的字符集合是0~m-1,那么称它为m进制字符串.给出n个m进制字符串\(s_i\),每个字符串的权值为\(v_i\).对于另一个m进制字符串\(S\),设\( ...
- spoj Longest Common Substring
Longest Common Substring SPOJ - LCS 题意:求两个串的最长公共子串 /* 对一个串建立后缀自动机,用另一个串上去匹配 */ #include<iostream& ...
- CompletionService详解
public interface CompletionService<V> { Future<V> submit(Callable<V> task); Future ...
- SP18637 LAWRENCE - Lawrence of Arabia
\(\color{#0066ff}{ 题目描述 }\) 给定一个长度为n的序列,至多将序列分成m+1段,每段序列都有权值,权值为序列内两个数两两相乘之和.求序列权值和最小为多少? \(\color{# ...
- P2770 航空路线问题
\(\color{#0066ff}{题目描述}\) 给定一张航空图,图中顶点代表城市,边代表 2 城市间的直通航线.现要求找出一条满足下述限制条件的且途经城市最多的旅行路线. (1)从最西端城市出发, ...
- maven部署Tomcat(出现空白页面，最终解决)
- 实验吧之Canon
解压zip文件得到一个mp3文件和一个zip压缩包,解压需要密码,那密码就在mp3里面,使用MO3Stego好像不能解析出文本,说明解析需要密码,此时通过网上的讨论说标题Canon就是密码,就试着用了 ...
- newFixedThreadPool固定线程使用
1.newFixedThreadPool固定线程池, 使用完毕必须手动关闭线程池, 否则会一直在内存中存在, package ThreadTest; import java.util.concurr ...
- hdu1028 Ignatius and the Princess III(递归、DP)
Ignatius and the Princess III Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K ...