CSS 中浮动的使用
float
none 正常显示
left 左浮动
right 右浮动
clear
none 允许两边浮动
left 不允许左边浮动
right 不允许右边浮动
both 不允许两边浮动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS 中浮动的使用</title>
<style type="text/css">
.div1{
background-color:#0F0;
width:200px;
height:200px;
float:left;
}
.div2{
background-color:#0FF;
width:200px;
height:200px;
float:left;
}
.div3{
background-color:#000;
width:200px;
height:200px;
float:left;
}
.div4{
background-color:#FF0;
width:200px;
height:200px;
float:left;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
</html>
浮动的特点：
1.使块元素在一行显示
2.使内嵌支持宽高
3.不设置宽度的时候宽度由内容撑开
内联元素加了浮动之后，变得可以设置宽高
<style>
span{ width:100px; height:100px; background:red; float:left;}
</style>
<body>
<span>asf</span>
<span>fdsaf</span>
</body>
元素加了浮动之后，就相当于漂浮到了上层，下面的元素就会在下层，当时下层元素里面的内容还是会被上层挤出来 如：
<style>
body{ font-size:20px;}
.box1{ width:100px;height:100px;background:red; float:left;}
.box2{ width:200px;height:200px;background:blue;}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
第一个div浮动了浮到上层，第二个div被第一个盖住，但是第二个div中的内容会被挤出来
<style>
body{ font-size:20px;}
.box1{ width:200px;height:200px;background:red; float:left;}
.box2{ width:200px;height:200px;background:blue;}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
浮动产生的问题和清除浮动的方法
<style>
body{margin:0;}
.box{width:400px; margin:0 auto; border:1px solid red; height:100px;}
.left{width:300px; height:300px; border:1px solid green;}
/*当父元素没设定高度的时候，子元素设定了高度是可以撑开父元素的，但是当父元素设定了高度或者子元素设定浮动后脱离文档流后就不能了*/
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
</div>
</body>
<style>
body{margin:0;}
.box{width:400px; margin:0 auto; border:1px solid red; float:left;}
.left{width:300px; height:300px; border:1px solid green;}
/*当父元素没设定高度的时候，子元素设定了高度是可以撑开父元素的，但是当父元素设定了高度或者子元素设定浮动后脱离文档流后就不能了*/
/*当父元素也浮动的时候又能包住子元素了，前提是父元素不设置小于子元素的高度和宽度，但这种方法不实用，导致margin：0 auto的居中无效了，而且当父元素还用父元素的时候，就要再一层层往上加浮动这样很麻烦*/
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
</div>
</body>
定位来清楚浮动
<style>
#box1{border:30px solid red; position:fixed;}
#box2{ width:300px; height:300px; background:blue; float:left;}/*子元素加了浮动之后，脱离了文档流，包不住子元素，父元素就可以加上绝对定位或者浮动点位*/
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
CSS 中浮动的使用的更多相关文章
- 浅谈css中浮动和清除浮动带来的影响
有很多时候,我们都会用到浮动,而我们有时候对浮动只是一知半解,却不是太清楚它到底是怎么回事,不知道各位有没有和我一样的感觉,只知道用它,却不知道它到底是怎么回事,所以,在学习的过程中,就要把一个概念不 ...
- 【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响
一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再 ...
- CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响
---恢复内容开始--- 一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是 ...
- CSS中浮动的使用
CSS有两个性质 第一个是 :继承性 第二个是:层叠性: 选择器的一种选择能力,谁的权重大就选谁 { 里面分两种情况: 分别是 选中和没选中. 1.选不中的情况下,走继承性,(font,color,t ...
- CSS中浮动属性float及清除浮动
1.float属性 CSS 的 Float(浮动),会使元素向左或向右移动,由于浮动的元素会脱离文档流,所以它后面的元素会重新排列. 浮动元素之后的那些元素将会围绕它,而浮动元素之前的元素将不会受到影 ...
- 关于css中浮动的理解及实际应用
一.元素浮动的意义及使用:1. 浮动的意义:设置了浮动属性的元素会脱离普通标准流的控制,移动到其父元素中指定的位置的过程,将块级元素放在一行,浮动会脱离标准流,不占位置,会影响标准流,浮动只有左右浮动 ...
- css 中的浮动
css中 浮动的作用: 使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”. css中 浮动的特点: 1)改变元素类型,使元素支持宽高: 2)半脱离文档流: 3)文本环绕: 4)顶对齐 ...
- 详细解读css中的浮动以及清除浮动的方法
对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家. 导读: 1.css块级元素讲解 2.css中浮动是如何产生的 3.出现浮动后,如何清除浮 ...
- css中的float属性以及清除方法 (2011-09-03 17:36:26)
CSS里面的浮动属性是布局的常用工具,只有真正了解它并熟练使用才能将它的优点发挥到极致. 许多页面中都有文字绕图效果,并且各区块分布得错落有置,很多朋友在自学CSS布局时为了做出这些效果往往会被div ...
随机推荐
- Unity3D 运营商支付 安卓打包的陷阱 libunicomsdk.jar
原地址:http://blog.csdn.net/alking_sun/article/details/36624491 想想做Unity3D SDK集成已经快2年了,遇到过不少很棘手的SDK,其中以 ...
- logback日志项目使用方法 - 150205交易模块添加日志信息logback,orderNo订单号为log主键便于跟踪，数字常量化，解决取消支付BUG，弱网络环境原因
1.项目里面的日志,便于跟踪数据的变更和异常错误信息产生.生产环境的日志级别是INFO,测试环境日志级别DEBUG,如果生产环境的日志级别是DEBUG,虽然方便查询问题,可以看到SQL语句等信息,但是 ...
- Oracle自带的用户
Oracle安装完毕创建数据库实例的时候,会自动生成三个用户sys,system,scott. sys用户是超级管理员,具有最高权限,充当sysdba角色,可以执行create database,默认 ...
- ZOJ3720 Magnet Darts(点在多边形内)
第一道点在多边形内的判断题,一开始以为是凸的.其实题意很简单的啦,最后转化为判断一个点是否在一个多边形内. 如果只是简单的凸多边形的话,我们可以枚举每条边算下叉积就可以知道某个点是不是在范围内了.但对 ...
- HDU 4572 Bottles Arrangement（找规律，仔细读题）
题目 //找规律,123321123321123321…发现这样排列恰好可以错开 // 其中注意题中数据范围: M是行,N是列,3 <= N < 2×M //则猜测:m,m,m-1,m-1 ...
- iOS警告－Warning: Error creating LLDB target at path（模拟器警告）
Warning: Error creating LLDB target at path '/Users/apple/Library/Developer/Xcode/DerivedData/Observ ...
- 评论 “App死亡潮：400万应用僵尸超八成，周期仅10月”
点这里 原文: App死亡潮:400万应用僵尸超八成,周期仅10月 时间 2015-04-05 22:48:19 和讯科技相似文章 (16)原文 http://tech.hexun.com/201 ...
- 2014多校第三场1005 || HDU 4891 The Great Pan（模拟）
题目链接 题意 : 给你n行字符串,问你有多少种理解方式.有两大类的理解 (1){A|B|C|D|...}代表着理解方式可以是A,可以是B或C或者D. (2)$blah blah$,在$$这两个符号中 ...
- nodejs的require模块及路径
在nodejs中,模块大概可以分为核心模块和文件模块. 核心模块是被编译成二进制代码,引用的时候只需require表示符即可,如(require('net')). 文件模块,则是指js文件.json文 ...
- java理论基础学习一
java的最大优势是跨平台 java的版本和体系架构 1.J2EE Java 2 Enterprise Edition 定位在服务器端的应用 2.J2SE Java 2 Standard Ed ...