1. 文档流

  • 指盒子按照 html 标签编写的顺序依次从上到下，从左到右排列
  • 块元素占一行
  • 行内元素在一行之内
    • 从左到右排列
    • 先写的先排列
    • 后写的排在后面
    • 每个盒子都占据自己的位置

2. 浮动的特性

  1. 浮动元素有左浮动(float:left)和右浮动(float:right)两种
  2. 浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来
  3. 相邻浮动的块元素可以并在一行，超出父级宽度就换行
  4. 浮动让行内元素或块元素自动转化为行内块元素
  5. 浮动元素后面没有浮动的元素会占据浮动元素的位置
  6. 对没有浮动的元素而言，其内部的文字会避开浮动的元素，形成文字饶图的效果
  7. 若父元素内整体浮动的元素无法撑开父元素，则需要清除浮动
  8. 浮动元素之间没有垂直 margin 的合并

少废话，上例子

例 1

  1. <!-- 例1 -->
  2. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.         <meta charset="utf-8">
  6.         <title>test</title>
  7.         <link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
  8.     </head>
  9.     <body>
  10.         <div class="box1">box1</div>
  11.         <div class="box2">box2</div>
  12.     </body>
  13. </html>
  1. <!-- 例1.1 -->
  2. .box1{
  3.     width: 100px;
  4.     height: 100px;
  5.     background: red;
  6. }
  7. .box2{
  8.     width: 220px;
  9.     height: 220px;
  10.     background: green;
  11. }
  • 效果截图 1

  1. <!-- 例1.2 html 不变 -->
  2. div{
  3.     width: 100px;
  4.     height: 100px;
  5. }
  6. .box1{
  7.     background: red;
  8.     float: left;
  9. }
  10. .box2{
  11.     background: green;
  12. }
  • 效果截图 2

  1. <!-- 例1.3 html 不变 -->
  2. div{
  3.     width: 100px;
  4.     height: 100px;
  5. }
  6. .box1{
  7.     background: red;
  8. }
  9. .box2{
  10.     background: green;
  11.     float: left;
  12. }
  • 效果截图 3

    • 与效果截图 1 相同，略
  1. <!-- 例1.4 html 不变 -->
  2. div{
  3.     width: 100px;
  4.     height: 100px;
  5. }
  6. .box1{
  7.     background: red;
  8.     float: left;
  9. }
  10. .box2{
  11.     background: green;
  12.     float: left;
  13. }
  • 效果截图 4

  1. <!-- 例1.5 html 不变 -->
  2. div{
  3.     width: 100px;
  4.     height: 100px;
  5. }
  6. .box1{
  7.     background: red;
  8.     float: right;
  9. }
  10. .box2{
  11.     background: green;
  12.     float: left;
  13. }
  • 效果截图 5

例 2

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>test</title>
  6.         <link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
  7.     </head>
  8.     <body>
  9.         <div class="box1">box1</div>
  10.         <div class="box2">box2</div>
  11.         <div class="box3">box3</div>
  12.         <div class="box4">box4</div>
  13.     </body>
  14. </html>
  1. div{
  2.     width: 100px;
  3.     height: 100px;
  4. }
  5. .box1{
  6.     width: 100px;
  7.     height: 100px;
  8.     background: red;
  9.     float: left;
  10. }
  11. .box2{
  12.     width: 120px;
  13.     height: 120px;
  14.     background: green;
  15.     float: left;
  16. }
  17. .box3{
  18.     width: 140px;
  19.     height: 140px;
  20.     background: blue;
  21. }
  22. .box4{
  23.     background: yellow;
  24.     float: left;
  25. }
  • 效果截图 6

例 3

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>test</title>
  6.         <link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
  7.     </head>
  8.     <body>
  9.         <div class="wrap">
  10.             <div class="item1">item1</div>
  11.             <div class="item2">item2</div>
  12.             <div class="item3">item3</div>
  13.             <div class="item4">item4</div>
  14.         </div>
  15.     </body>
  16. </html>
  1. .wrap{
  2.     width: 500px;
  3.     border: 2px solid;
  4.     /* float: left;	加上这句的效果见效果截图 8 */
  5. }
  6. .item1{
  7.     width: 100px;
  8.     height: 100px;
  9.     background: red;
  10.     float: left;
  11. }
  12. .item2{
  13.     width: 100px;
  14.     height: 100px;
  15.     background: green;
  16.     float: left;
  17. }
  18. .item3{
  19.     width: 200px;
  20.     height: 100px;
  21.     background: blue;
  22.     float: left;
  23. }
  24. .item4{
  25.     width: 200px;
  26.     height: 100px;
  27.     background: yellow;
  28.     float: left;
  29. }
  • 效果截图 7

  • 效果截图 8

参考：北京图灵学院的 Web 前端公开课

[Web 前端] 017 css 浮动的更多相关文章

  1. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  2. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  3. Python web前端 02 CSS

    Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...

  4. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

  5. 好程序员web前端分享CSS元素类型

    好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...

  6. 1+x 证书 Web 前端开发 css 专项练习

    官方QQ群 1+x 证书 Web 前端开发 css 专项练习 http://blog.zh66.club/index.php/archives/192/

  7. Android程序员学WEB前端(8)-CSS(3)-盒子内联块级定位浮动-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76618473 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 盒子模型: <!D ...

  8. Web前端温故知新-CSS基础

    一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...

  9. web前端开发CSS命名规范参考

    做为一个web前端工程师,每天接触HTML.css就像吃饭一样,但是作为一名合作.优秀的web前端工程师,对DIV+CSS命名还是有一定的规范的,本文整理了一份web前端开发中DIV+CSS各种命名规 ...

随机推荐

  1. 在 LaTeX 中同步缩放 TikZ 与其中的 node

    PGF/TikZ 是 Till Tantau 开发的基于 TeX 的绘图引擎.因其可以直接在 LaTeX 文稿中通过代码绘制向量图,所以是目前流行的 LaTeX 绘图解决方案之一. 在 tikzpic ...

  2. Python3 install pip

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/12033910.html curl https://bootstrap.pypa.io/get-pip. ...

  3. linux C++ 通讯架构（一）nginx安装、目录、进程模型

    nginx是C语言开发的,号称并发处理百万级别的TCP连接,稳定,热部署(运行时升级),高度模块化设计,可以用C++开发. 一.安装和目录 1.1 前提 epoll,linux内核版本为2.6或以上 ...

  4. 尝试用了一哈wepy框架的感想

    恶心死我, 1 在项目里出现了中文乱码(utf-8在wpy文件里有中文和注释--编译后就转化成乱码, 把代码拷在另外的项目里,(该项目没有中文乱码现象,)编译出来就出现中文乱码, 然后我再在所拷的代码 ...

  5. @PathVariable注解使用

    @PathVariable是spring3.0的一个新功能:接收请求路径中占位符的值 语法: @PathVariable("xxx")通过 @PathVariable 可以将URL ...

  6. 超好用json转excel工具

    给大家安利一个超实用的json数据转excel工具:http://www.yzcopen.com/doc/jsonexcel

  7. input 禁止删除部分文字

    用label和所需的input链接,label部分就是禁止删除的部分.<input type="text" name="city" value=" ...

  8. 【Java】Java实现二维码的生成与解析

    pom依赖 <dependency> <groupId>com.google.zxing</groupId> <artifactId>core</ ...

  9. 【BZOJ2460】元素（拟阵）

    题意:给定n个物品,每个物品有属性x和价值y,要求从中选出一些使得价值和最大并且其中没有属性xor和为0的非空子集 n<=1000,x<=1e18,y<=1e4 思路:没有xor和为 ...

  10. Android检测WIFI连接、提示框延时消失

    Android检测系统WIFI是否连接?如没有连接,显示提示框,提示进行设置,当点击设置进入系统WIFI界面后1秒钟,提示框自动消失. 代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 ...