[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各种命名规 ...
随机推荐
- Java并发-CycliBarrier
栅栏类似于闭锁,它能阻塞一组线程直到某个事件的发生.栅栏与闭锁的关键区别在于,所有的线程必须同时到达栅栏位置,才能继续执行.闭锁用于等待事件,而栅栏用于等待其他线程.package com.examp ...
- bzoj5089 最大连续子段和 分块+复杂度分析+凸包
题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=5089 题解 本来打算迟一点再写这个题解的,还有一个小问题没有弄清楚. 不过先写一下存个档吧. ...
- ZROI 19.07.28 序列数据结构/jk
写在前面 dls:"我不会数据结构,但是APIO的数据结构场我写了,还是蛮简单的." T1 CF643G Sol: 有一个\(O(n\log^2n)\)的做法:假设将区间排好序,取 ...
- QQ群文件未通过安全检查，禁止下载该文件
直接用手机收藏群文件,然后用电脑登上qq去收藏里面下载就ok了
- Debian10+OpenMediaVault(OMV)安装
前言:测试打造NAS平台,以下是步骤. 安装Debian10 注:请下载amd64,不要下载i836平台,因为OMV外挂插件不支持I836所以不建议用i836,如只使用官方插件可以无视 安装前-安装, ...
- 6364. 【NOIP2019模拟2019.9.20】养马
题目描述 题解 一种显然的水法:max(0,-(点权-边权之和*2)) 这样会挂是因为在中途体力值可能会更小,所以考虑求走完每棵子树所需的至少体力值 考虑从子树往上推求出当前点的答案 设每棵子树从根往 ...
- apicloud直接上传图片
function getPicture() { api.confirm({ title : "提示", msg : "选择图片", buttons : [&qu ...
- 【bzoj3195】【 [Jxoi2012]奇怪的道路】另类压缩的状压dp好题
(上不了p站我要死了) 啊啊,其实想清楚了还是挺简单的. Description 小宇从历史书上了解到一个古老的文明.这个文明在各个方面高度发达,交通方面也不例外.考古学家已经知道,这个文明在全盛时期 ...
- Leetcode 6. ZigZag Conversion（找规律，水题）
6. ZigZag Conversion Medium The string "PAYPALISHIRING" is written in a zigzag pattern on ...
- UE4 Pro Tips（keeps updating）
Consolidate 功能 :在工程范围内用一种资源替换另外一种或多种资源具体操作:同时在编辑器中选中两个或多个资源,右键>Asset Actions>Replace Reference ...