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种:内联式.嵌 ...
随机推荐
- javascript函数的四种调用模式及其this关键字的区别
方法调用模式: 当一个函数被保存为对象的一个属性时,我们称它为一个方法.当一个方法被调用时,this被绑定到该对象. //方法调用模式 var myObject = { value: 0 , incr ...
- 查看SQLServer的QUOTED_IDENTIFIER等配置
DBCC USEROPTIONS SELECT SESSIONPROPERTY('QUOTED_IDENTIFIER') quotedidentifier SELECT SESSIONPROPERTY ...
- deferred rendering with msaa
https://docs.nvidia.com/gameworks/content/gameworkslibrary/graphicssamples/d3d_samples/antialiasedde ...
- tomcat 部署 RESTful 服务实例
1.建立简单restfule服务 参考:java 利用JAX-RS快速开发RESTful 服务实例 简单代码: package com.example; import javax.ws.rs.GET; ...
- UML分析设计顺序
1.用例图:最简单的模型,与设计无关 2.活动图:类似流程图 3.用例图:对1的细化,分解后的Actor及Use Case 4.用例图:分解后的Actor及抽取的数据实体 5.类图:数据结构图 6.顺 ...
- java 图片文字识别 ocr
最近在开发的时候需要识别图片中的一些文字,网上找了相关资料之后,发现google有一个离线的工具,以下为java使用的demo 在此之前,使用这个工具需要在本地安装OCR工具: 下面一个是一定要安装的 ...
- [Functional Programming Monad] Refactor Stateful Code To Use A State Monad
When we start to accumulate functions that all work on a given datatype, we end up creating a bunch ...
- iPhone销售拉动 鸿海精密第一季度利润增长21%
据美国<华尔街日报>5月15日消息,苹果公司主要代工厂鸿海精密发布,第一季度利润增长21%.主要得益于iPhone手机销量强劲以及生产效率提升. 这家全球最大的电子产品代工商近一半的收入是 ...
- PowerDesigner一些常用功能介绍
主键.自增长等等 修改之前: drop table if exists sys_user; /*==================================================== ...
- UISegmentedControl 修改字体大小 和 颜色
UISegmentedControl 修改字体大小 和 颜色 大小: UIFont *font = [UIFont boldSystemFontOfSize:14.0f]; NSDictionary ...