CSS浮动的3个特性（高手绕行）
1. 浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示；
代码示例：
<!DOCTYPE HTML >
<html>
<head>
<meta charset='utf-8'/>
<title>浮动元素的性质</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.box{
width: 300px;
height: 200px;
padding: 50px;
margin: 50px;
background: #ccf;
}
.inner{
width: 100px;
height: 100px;
background: #fcc;
float: right;
}
</style>
</head>
<body>
<div class='box'>
<div class='inner'>浮动元素</div>
</div>
</body>
</html>
效果图：
2. 浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上一个（实例中为父元素）任意非浮动元素靠齐；
代码示例：
<!DOCTYPE HTML >
<html>
<head>
<meta charset='utf-8'/>
<title>浮动元素的性质</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.box{
width: 400px;
height: 200px;
padding: 50px;
margin: 50px;
background: #ccf;
}
.inner{
width: 100px;
height: 100px;
background: #fcc;
float: left;
}
.notfloat{
width: 200px;
height: 200px;
background: #cfc;
}
</style>
</head>
<body>
<div class='box'>
<div class='inner'>浮动元素</div>
<div class='notfloat'>浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐。
边框和背景却忽略浮动元素而向上一个（这二为为父元素）任意非浮动元素靠齐 </div>
</div>
</body>
</html>
效果图：
3. 浮动元素后面的内联元素会向此浮动元素的外边距靠齐。
代码示例：
<!DOCTYPE HTML >
<html>
<head>
<meta charset='utf-8'/>
<title>浮动元素的性质</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.box{
width: 400px;
height: 200px;
padding: 50px;
margin: 50px;
background: #ccf;
}
.inner{
width: 100px;
height: 100px;
background: #fcc;
float: left;
}
.notfloat{
background: #cfc;
}
</style>
</head>
<body>
<div class='box'>
<div class='inner'>浮动元素</div>
<span class='notfloat'>
浮动元素后面的内联元素会向此浮动元素的外边距靠齐
</span>
</div>
</body>
</html>
效果图：
For My Lover, CC!
CSS浮动的3个特性（高手绕行）的更多相关文章
- css浮动（folat），清除浮动（clear）（另加两种清除浮动方式，总共三种清除浮动方式）
css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右 ...
- css 浮动和清除浮动
在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结. 一.浮动 ...
- css浮动(float)及清除浮动的几种实用方法
CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...
- Css - 浮动布局
Css - 浮动布局 浮动布局 float 取值:left | right | none 利用float属性可设置元素的浮动,虽然浮动主要是应用于块元素,但行内元素其实也可以浮动,但行内元素本来就是一 ...
- CSS 浮动和清除
CSS 浮动和清除浮动 在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这 ...
- css 浮动问题详解
浮动(float),一个我们即爱又恨的属性.爱,因为通过浮动,我们能很方便地布局: 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器). ...
- css浮动(float)及如何清除浮动
前言: CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float)(1)html文档流 自窗体自上而下分成一行一 ...
- [CSS]CSS浮动塌陷及解决办法
一. CSS浮动 先看一个例子 <html !DOCTYPE> <head> <title>HTML2</title> <style> .d ...
- css浮动现象及清除浮动的方法
css浮动现象及清除浮动的方法 首先先明确浮动最初的定义及使用场景:实现文本环绕图片的效果. 除了用浮动外,目前暂无其他方法实现文本环绕 再来看看浮动的具体定义: 浮动的框可以左右移动,直至它 ...
随机推荐
- 「HAOI2010」 弹飞绵羊
题目链接 戳我 \(Solution\) \(LCT\)裸题 我们首先先新建一个节\(n+1\)点,表示被弹飞 对于点\(i,link(i,min(n+1,i+k_i))\) 再看看修改: 现在要将点 ...
- leetcode 74 搜索二维矩阵 java
题目: 编写一个高效的算法来判断 m x n 矩阵中,是否存在一个目标值.该矩阵具有如下特性: 每行中的整数从左到右按升序排列. 每行的第一个整数大于前一行的最后一个整数. 示例 1: 输入: mat ...
- Linux的思维导图
- python学习笔记-练手实例
1.题目:输出 9*9 乘法口诀表. 程序分析:分行与列考虑,共9行9列,i控制行,j控制列 代码: for i in range(1,10): print ('\r') for j ...
- [Objective-C语言教程]基础框架（34）
如果您参考Apple文档,应该会看到Foundation框架的详细信息,如下所示. Foundation框架定义了Objective-C类的基础层. 除了提供一组有用的原始对象类之外,它还引入了几个定 ...
- 在linux云服务器上运行Jar文件
在linux服务器上运行Jar文件时通常的方法是: $ java -jar test.jar 这种方式特点是ssh窗口关闭时,程序中止运行.或者是运行时没法切出去执行其他任务,有没有办法让Jar在后台 ...
- spring-boot-maven-plugin多模块install问题解决办法
一.问题描述: 项目分多个模块,open-eureka注册中心.open-provider服务提供者.open-common公共部分,provider依赖common.父pom使用spring-boo ...
- Python之机器学习K-means算法实现
一.前言: 今天在宿舍弄了一个下午的代码,总算还好,把这个东西算是熟悉了,还不算是力竭,只算是知道了怎么回事.今天就给大家分享一下我的代码.代码可以运行,运行的Python环境是Python3.6以上 ...
- C++基础知识：成员函数、对象拷贝、私有成员
一.综述 类是我们自己定义的数据类型(新类型) 设计类时要考虑的角度: (1)站在设计和实现者的角度来考虑 (2)站在使用者的角度来考虑 (3)父类,子类 二.类基础 (1)一个类就是一个用户自己定义 ...
- hive一些基本用法
1.hive中的数据库表的类型有两种,一种是managed,一种是external :managed表类型是指传入的数据放在hive默认的储存位置下,而external 表类型可以将数据 放在任意的 ...