浮动
浮动是css里面布局用的最多的属性。
  1. .box1{
  2.                      float: left;
  3.                      width: 300px;
  4.                      height: 400px;
  5.                      background-color: yellowgreen;
  6.               }
  7.               .box2{
  8.                      float: left;
  9.                      width: 400px;
  10.                      height: 400px;
  11.                      background-color: skyblue;
  12.               }
两个元素并排了，并且两个元素都能够设置宽度、高度了（这在刚才的标准流中，不能实现）。
浮动想学好，一定要知道三个性质。

1 浮动的元素脱标

：

：
一个span标签不需要转成块级元素，就能够设置宽度、高度了。所以能够证明一件事儿，就是所有标签已经不区分行内、块了。也就是说，一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。
  1. span{
  2.                      float: left;
  3.                      width: 200px;
  4.                      height: 200px;
  5.                      background-color: orange;
  6.               }

2 浮动的元素互相贴靠

号大哥。
号大哥，自己去贴左墙。
右浮动：   float:right;

3 浮动的元素有“字围”效果

HTML：
  1. <div>
  2.               <img src="data:images/1.jpg" alt="" />
  3.        </div>
  4.        <p>123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
  5. </p>
让div浮动，p不浮动：
div挡住了p，但是p中的文字不会被挡住，形成“字围”效果。
关于浮动我们要强调一点，浮动这个东西，我们在初期一定要遵循一个原则：
永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。

4浮动的收缩

收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为文字的宽度（这点非常像行内元素）。
比如：
  1. <style type="text/css">
  2.               div{
  3.                      float: left;
  4.                      background-color: gold;
  5.               }
  6.        </style>
这个div浮动了，且没有设置宽度，那么将自动缩紧为内容的宽度：
整个网页，就是通过浮动，来实现并排的。

5清除浮动

不清除例子：

第二排的第一个li会去贴靠第一组的最后一个li
因为div没有高度，不能给自己浮动的孩子们，一个容器。
1.方法一：如果一个元素要浮动，那么它的祖先元素一定要有高度。高度的盒子，才能关住浮动。
2.方法二：clear:both; or clear:left; or clear:right;（清除别人对我的影响）。         问题：margin会失效。
3.方法三（method 3）：
“隔墙法 ”：第二组浮动会去追第二组浮动，利用一个“墙”将两个浮动隔开。之后互不影响。
例：
“内墙法”：本质就是给父亲自动撑高
4.方法4（method 4）：overflow:hidden;本意表示溢出隐藏，溢出边框的内容（文字，图片等）都要隐藏。
偏方：一个父亲不能被自己浮动的儿子，撑出高度，只要给父亲加上overflow:hidden;那么，父亲就能被儿子撑出高了。
注：不支持IE6，加上 zoom:1;

最新文章

  1. NET Core-学习笔记（三）
  2. SQL注入攻击之关键字检测
  3. 详解Jquery和AngularJs，Servlet中jsonp解决跨域问题(转)
  4. (medium)LeetCode 210.Course Schedule II
  5. Laxcus大数据管理系统2.0（14）- 后记
  6. Web中的监听器【Listener】与过滤器【Filter】 实例
  7. ajax 基础教程
  8. [Django 1.5] jQuery/Ajax 在Django使用 ，如何更新模板里里变量
  9. 依赖注入（DI）有助于应用对象之间的解耦，而面向切面编程（AOP）有助于横切关注点与所影响的对象之间的解耦（转good）
  10. PHP面向对象中 static:: 与 self:: parent:: $this-&gt; 的区别
  11. 【性能测试工具】- Http_Load
  12. 在Intellij IDEA中使用Debug
  13. 使用DevExpress.XtraTabbedMdi.XtraTabbedMdiManager控件来加载MDI窗体
  14. 17秋 软件工程 第六次作业 Beta冲刺
  15. 在GDAL中添加GDALRasterizeGeometriesBuf函数
  16. svg 学习笔记
  17. 【读书笔记】iOS-关闭键盘的2种方法
  18. Python笔记（十）：正则表达式
  19. 用Python连接SQLServer抓取分析数据、监控 （pymssql）
  20. for-auto使用

热门文章

  1. RxSwift学习笔记8：filter/distinctUntilChanged/single/elementAt/ignoreElements/take/takeLast/skip/sample/debounce
  2. first one
  3. 深圳scala-meetup-20180902（2）- Future vs&#160;Task&#160;and&#160;ReaderMonad依赖注入
  4. 什么是RDD？
  5. Go语言常量
  6. Linux - 快速进入目录的方法
  7. Linux - 查看命令所属的软件包
  8. Win10手记－取色器ColorPicker的实现
  9. PHP-----浅谈垃圾回收机制
  10. [EXP]ThinkPHP 5.0.23/5.1.31 - Remote Code Execution