[Web 前端] 017 css 浮动
1. 文档流
- 指盒子按照 html 标签编写的顺序依次从上到下，从左到右排列
- 块元素占一行
- 行内元素在一行之内
- 从左到右排列
- 先写的先排列
- 后写的排在后面
- 每个盒子都占据自己的位置
2. 浮动的特性
- 浮动元素有左浮动(float:left)和右浮动(float:right)两种
- 浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来
- 相邻浮动的块元素可以并在一行，超出父级宽度就换行
- 浮动让行内元素或块元素自动转化为行内块元素
- 浮动元素后面没有浮动的元素会占据浮动元素的位置
- 对没有浮动的元素而言，其内部的文字会避开浮动的元素，形成文字饶图的效果
- 若父元素内整体浮动的元素无法撑开父元素，则需要清除浮动
- 浮动元素之间没有垂直 margin 的合并
少废话，上例子
例 1
<!-- 例1 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>
<!-- 例1.1 -->
.box1{
width: 100px;
height: 100px;
background: red;
}
.box2{
width: 220px;
height: 220px;
background: green;
}
- 效果截图 1
<!-- 例1.2 html 不变 -->
div{
width: 100px;
height: 100px;
}
.box1{
background: red;
float: left;
}
.box2{
background: green;
}
- 效果截图 2
<!-- 例1.3 html 不变 -->
div{
width: 100px;
height: 100px;
}
.box1{
background: red;
}
.box2{
background: green;
float: left;
}
- 效果截图 3
- 与效果截图 1 相同，略
<!-- 例1.4 html 不变 -->
div{
width: 100px;
height: 100px;
}
.box1{
background: red;
float: left;
}
.box2{
background: green;
float: left;
}
- 效果截图 4
<!-- 例1.5 html 不变 -->
div{
width: 100px;
height: 100px;
}
.box1{
background: red;
float: right;
}
.box2{
background: green;
float: left;
}
- 效果截图 5
例 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
</body>
</html>
div{
width: 100px;
height: 100px;
}
.box1{
width: 100px;
height: 100px;
background: red;
float: left;
}
.box2{
width: 120px;
height: 120px;
background: green;
float: left;
}
.box3{
width: 140px;
height: 140px;
background: blue;
}
.box4{
background: yellow;
float: left;
}
- 效果截图 6
例 3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
</head>
<body>
<div class="wrap">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
<div class="item4">item4</div>
</div>
</body>
</html>
.wrap{
width: 500px;
border: 2px solid;
/* float: left; 加上这句的效果见效果截图 8 */
}
.item1{
width: 100px;
height: 100px;
background: red;
float: left;
}
.item2{
width: 100px;
height: 100px;
background: green;
float: left;
}
.item3{
width: 200px;
height: 100px;
background: blue;
float: left;
}
.item4{
width: 200px;
height: 100px;
background: yellow;
float: left;
}
- 效果截图 7
- 效果截图 8
参考：北京图灵学院的 Web 前端公开课
[Web 前端] 017 css 浮动的更多相关文章
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- Python web前端 02 CSS
Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...
- Python web前端 03 CSS属性
Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
- 好程序员web前端分享CSS元素类型
好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...
- 1+x 证书 Web 前端开发 css 专项练习
官方QQ群 1+x 证书 Web 前端开发 css 专项练习 http://blog.zh66.club/index.php/archives/192/
- Android程序员学WEB前端(8)-CSS(3)-盒子内联块级定位浮动-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76618473 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 盒子模型: <!D ...
- Web前端温故知新-CSS基础
一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...
- web前端开发CSS命名规范参考
做为一个web前端工程师,每天接触HTML.css就像吃饭一样,但是作为一名合作.优秀的web前端工程师,对DIV+CSS命名还是有一定的规范的,本文整理了一份web前端开发中DIV+CSS各种命名规 ...
随机推荐
- N^2取N
序列合并 有两个长度都是N的序列A和B,在A和B中各取一个数相加可以得到N^2个和,求这N^2个和中最小的N个. 先把A B排序 然后pushA[1]+B[i](1<=i<=n)每次取出一 ...
- 1.基础: 万丈高楼平地起——Redis基础数据结构 学习记录
<Redis深度历险:核心原理和应用实践>1.基础: 万丈高楼平地起——Redis基础数据结构 学习记录http://naotu.baidu.com/file/b874e2624d3f37 ...
- spring jpa 带参数分页查询（一）
1.写个接口继承JpaRepository @NoRepositoryBean public interface BaseRepository<T,PK extends Serializable ...
- SpringBoot之初体验
一.SpringBoot 介绍 1.1 SpringBoot 使命 在之前我们学习 Spring 时,我们了解到 Spring 最根本的使命就是 简化Java开发.而 SpringBoot 的出现也有 ...
- spring5
Spring 是面向 Bean 的编程(Bean Oriented Programming, BOP) ,Spring 提供了 IOC 容器通过配置文件或者注解的方式来管理对象之间的依赖关系. 控制反 ...
- Java内存模型（JMM）的可见性
JMM(Java Memory Model)内存模型之可见性 JMM是Java内存模型的缩写,本身是一种抽象的概念,并不真实存在,它描述的是一组规则或规范,通过这组规范定义了程序中各个变量(包括实例字 ...
- Oracle 与 ODAC 一起安装
Oracle 需要设置path变量支持运行,ODAC安装时会将其路径加入path变量. 导致先搜索到ODAC,连接出现:ora-12560: TNS:protocol adapter error 将p ...
- HDU 4758 Walk Through Squares ( Trie图 && 状压DP && 数量限制类型 )
题意 : 给出一个 n 行.m 列的方格图,现从图左上角(0, 0) 到右下角的 (n, m)走出一个字符串(规定只能往下或者往右走),向右走代表' R ' 向下走则是代表 ' D ' 最后从左上角到 ...
- php调接口批量同步本地文件到cos或者oss
代码: <?php namespace Main\Controller; use Common\Library\Vendor\ElasticSearch; use Common\Library\ ...
- 在XenCenter6.2中构建CentOS7虚拟机的启动错误
在XenCenter6.2中创建CentOS7虚拟机时,发现系统并没有提供CentOS7 64bit的模板,只有CentOS6 64bit模板.如果采用CentOS6作为其模板来创建CentOS7虚拟 ...