CSS学习笔记（1）--浮动
总结：浮动只能在脱离文档流的当前位置向上浮动，不能像定位一样到处乱跑。
清除浮动，设置一个类.clear{clear:both;}
1.没有浮动，都独占一行：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
width:50px;
height: 50px;
background: #f00;
/*float: left;*/
}
#div2{
width: 70px;
height: 70px;
background: #00f;
/*float: left;*/
}
#div3{
width: 100px;
height: 100px;
background: #0f0;
/*float: left;*/
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
2.红色浮动，后两个顶上来：
<style>
#div1{
width:50px;
height: 50px;
background: #f00;
float: left;
}
#div2{
width: 70px;
height: 70px;
background: #00f;
/*float: left;*/
}
#div3{
width: 100px;
height: 100px;
background: #0f0;
/*float: left;*/
}
</style>
3.红色、蓝色浮动，绿色顶上来，红蓝在上面一层先后排列：
<style>
#div1{
width:50px;
height: 50px;
background: #f00;
float: left;
}
#div2{
width: 70px;
height: 70px;
background: #00f;
float: left;
}
#div3{
width: 100px;
height: 100px;
background: #0f0;
/*float: left;*/
}
</style>
4.全部浮动，都在上面一层，先后排列：
<style>
#div1{
width:50px;
height: 50px;
background: #f00;
float: left;
}
#div2{
width: 70px;
height: 70px;
background: #00f;
float: left;
}
#div3{
width: 100px;
height: 100px;
background: #0f0;
float: left;
}
</style>
5.只蓝色浮动，上面是红色独占一行，绿色的顶到蓝色原来的位置，蓝色到上一层：
<style>
#div1{
width:50px;
height: 50px;
background: #f00;
/*float: left;*/
}
#div2{
width: 70px;
height: 70px;
background: #00f;
float: left;
}
#div3{
width: 100px;
height: 100px;
background: #0f0;
/*float: left;*/
}
</style>
6.蓝色和绿色浮动，都在第二列先后排布：
<style>
#div1{
width:50px;
height: 50px;
background: #f00;
/*float: left;*/
}
#div2{
width: 70px;
height: 70px;
background: #00f;
float: left;
}
#div3{
width: 100px;
height: 100px;
background: #0f0;
float: left;
}
</style>
7.红蓝绿都浮动，绿色加一个“清除左侧”，意思是，不允许左侧有东西，就跑去下一行了（清除两侧效果一样，因为包含了左侧）：
<style>
#div1{
width:50px;
height: 50px;
background: #f00;
float: left;
}
#div2{
width: 70px;
height: 70px;
background: #00f;
float: left;
}
#div3{
width: 100px;
height: 100px;
background: #0f0;
float: left;
clear: left;
}
</style>
CSS学习笔记（1）--浮动的更多相关文章
- CSS学习笔记08 浮动
从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...
- html+css学习笔记 3[浮动]
inline-block/float(浮动) 回顾:inline-block 特性: 1.块在一排显示 2.内联支持宽高 3.默认内容撑开宽度 4.标签之间的换行间隙被解析(问题) 5.ie ...
- CSS学习笔记：浮动属性
目录 一.浮动流是什么 二.通过代码实例了解浮动特点 1. 搭建测试框架 2. 添加浮动 3. 浮动元素的排布 4. 给行内元素添加浮动效果 5. 子元素浮动后对父元素的影响 5.1 在父元素中添加o ...
- CSS学习笔记10 相对定位，绝对定位与固定定位
文档流中的元素的位置由元素在 (X)HTML 中的位置决定,这就是最原始的普通流,前面讲到的浮动CSS学习笔记08 浮动可以改变元素在文档流中的位置,除了这个我们还可以通过使用CSS的position ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- css学习笔记四
广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...
- CSS学习笔记09 简单理解BFC
引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- div+css学习笔记一（转）
div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中 背景图片 ie6 ie7 margin 杂谈 分类: 网页制作 1.IE6中用了float之后导致m ...
- 2022-07-10 第五小组 pan小堂 css学习笔记
css学习笔记 什么是 CSS? CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作. ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
随机推荐
- 3dsMAX 插件
SDK C++ 对性能有要求 底层接口 MAXScript 上层接口 a few more function whick sdk does not afford MCG像蓝图一样的东西 http:// ...
- lumisoft邮件头不规范造成内容无法读取
解决邮件内容为multipart,并且Param_Boundary等于null的不规范邮件内容无法读取问题,这样的邮件内容头部往往带两个或多个ContentType. 红色为自己加的,绿色为注释掉原来 ...
- Android面试，简要介绍一下asynctask和handler的优缺点
1 )AsyncTask实现的原理,和适用的优缺点 AsyncTask,是android提供的轻量级的异步类,可以直接继承AsyncTask,在类中实现异步操作,并提供接口反馈当前异步执行的程度(可以 ...
- Index 和 Type 的区别
原文: Index vs. Type By Adrien Grand 译者: fengchang 对于 ES 的新用户来说,有一个常见的问题:要存储一批新的数据时,应该在已有 index 里新建一个 ...
- db2 v9.5迁移至v10.5，及遇重名节点数据库无法创建db的解决办法
同系统同版本可以使用备份恢复,本文前提是不同系统不同版本,使用db2move命令. 1.db2move db db_name export 此处注意,先建个目录放文件,因为文件比较多,如果上来直接ex ...
- BST数据结构题
给定BST.改动BST,使得每一个点都是大于他的结点的值之和 关键是这题递归參数怎么设计,每一个点比他大的有两快.一个是右子书(假设有的话),还有一个是祖先里面比他大的,假设直接用这两个的话,找不到递 ...
- java运行shell命令，chmod 777 xxx，改变权限无效的解决的方法。
在java程序中运行shell命令,改变文件的权限.能够在命令行中运行 chmod 777 <span style="font-family: Arial, Helvetica, sa ...
- 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-如何在同一台PC上运行多个TwinCAT程序
右击桌面右下角的TC2图标,切换到PLC Configuration,然后在Plc Settings中设置数量为4(TC2最多可以运行的数量是4个),然后点击Apply 可能需要输入登录用户名和密 ...
- vue - webpack.dev.conf.js
描述:开发时的配置.(配置开发时的一些操作) 例如这里,是否自动打开浏览器(默认true) 'use strict' // build/util.js const utils = require('. ...
- Php如何返回json数据
php返回json,xml,JSONP等格式的数据 返回json数据: header('Content-Type:application/json; charset=utf-8'); $arr = a ...