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种:内联式.嵌 ...
随机推荐
- java中Token验证
什么是Token:它是一个令牌,随机不可预测的. 为什么需要使用Token: 1,防止表单的重复提交 2:,防止跨站点的请求伪造 Token的使用流程是:首先在服务器端生成一个随机的token值并在服 ...
- taglib.jsp
<%@ taglib prefix="shiro" uri="/WEB-INF/tlds/shiros.tld" %><%@ taglib p ...
- [Functional Programming ADT] Create a Redux Store for Use with a State ADT Based Reducer
With a well defined demarcation point between Redux and our State ADT based model, hooking up to a R ...
- zookeeper单节点安装
1.安装jdk 2.安装解压zookeeper 先创建文件夹 解压zookeeper压缩包 3. 创建配置文件zoo.cfg 4.运行测试
- C#运行原理——我的柔情你永远不懂
记得歌手陈琳曾经在1993年发行了第一张专辑<你的柔情我永远不懂>,创造了150万张的销售纪录,里边的主打歌——我的柔情你永远不懂,多年以后才发现是写给C#运行原理的,因为原理总是伤不起~ ...
- Redis 数据结构之简单动态字符串SDS
几个概念1:key对象 数据库存储键值对的键,总是一个字符串对象.2:value对象 数据库存储键值对的值,可以是字符串对象,list对象,hash对象,set对象,sorted set对象. ...
- ES6 字符串扩展
1.字符串遍历接口 字符串可以被for...of循环遍历 'use strict'; for (let codePoint of 'foo') { //控制台输出f o o console.log(c ...
- Drupal启动阶段之三：数据库
Drupal在数据库启动阶段仅仅是简单地包含了database.inc文件,然后再注册类加载器: function _drupal_bootstrap_database() { // Initiali ...
- IE6—在链接click事件的响应函数中发送jsonp请求不生效
$("#link").click(function(){ $.ajax({ type: 'GET', dataType: 'jsonp', ...
- MAC 通过brew安装软件
1.安装brew ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/instal ...