CSS定位与布局：浮动
浮动的特点
- 浮动的元素会向左或者向右移动直到它的外边缘接触容器框（containing block）的边缘或者另外一个浮动元素的外边缘，因此浮动元素是不会浮动到中间的。
- 如果没有足够的水平空间让浮动元素占据，浮动元素将向下移动，直到下方空间足够容纳或者下方已经没有浮动元素。
- 因为浮动已经脱离普通流，所以非定位的非浮动块级元素会表现得浮动元素没有存在一样，但是inline box元素（包括普通inline box元素、块级元素内的inline box元素、浮动元素中的inline元素）依然会为浮动元素让出空间，但当浮动元素的外高度（包括margin和border）为0时，inline box元素则不会让出空间。
- 浮动元素的margins不会和相邻元素的重叠（collapse）。
- 根元素<html>不能浮动。
- 一个行内元素（inline element）或者一个块级元素（block element）浮动后同样会表现得和行内块级元素相似，可以设置高度和宽度，不设置时默认表现和行内元素一样，浮动元素内的容器框（containing block）会水平排列，可能会挤占相邻的浮动元素外的空间（故会有人建议应该为浮动元素设置宽度，图片等一些隐含宽度的元素则另外考虑），元素不再占领一行等等。
<div class="container">
<div class="floatdiv">--浮动div--</div>
<div class="floatdiv">..浮动div..</div>
<div class="nofloatdiv">(不浮动div)</div>
</div>
CSS：
.container {
border: 1px solid #000;
}
.floatdiv {
background-color: #ccc;
float: left;
}
.nofloatdiv {
background-color: #aaa;
}
（图1.1）
（图1.2）
<div class="container">
<div class="floatdiv_1">浮动div.1</div>
<div class="floatdiv_2">浮动div.2</div>
<div class="floatdiv_3">浮动div.3</div>
</div>
.container {
border: 1px solid #000;
width: 400px;
overflow: hidden;
*zoom:;/*兼容IE6，IE7*/
}
.floatdiv_1 {
background-color: #999;
float: left;
height: 50px;
width: 150px;
}
.floatdiv_2 {
background-color: #bbb;
float: left;
height: 30px;
width: 150px;
}
.floatdiv_3 {
background-color: #ddd;
float: left;
height: 30px;
width: 150px;
}
.container {
border: 1px solid #000;
overflow: hidden;
*zoom:;/*兼容IE6，IE7*/
}
HTML：
<div class="container">
<div class="floatdiv">浮动div</div>
<div class="nofloatdiv">不浮动div</div>
</div>
.container {
border: 1px solid #000;
width: 400px;
}
.floatdiv {
background-color: #ccc;
float: left;
height: 50px;
}
.nofloatdiv {
background-color: #aaa;
}
.container {
border: 1px solid #000;
width:400px;
overflow: hidden;
*zoom:;
}
<div class="container">
<div class="floatdivLeft">左浮动div</div>
<div class="floatdivRight">右浮动div</div>
<div class="footdiv">页脚</div>
</div>
.container {
border: 1px solid #000;
text-align: center;
width: 404px;
overflow: hidden;
*zoom:;/*兼容IE6，IE7*/
}
.floatdivLeft {
border: 1px solid #000;
float: left;
width: 100px;
height: 100px;
}
.floatdivRight {
border: 1px solid #000;
float: right;
width: 300px;
height: 100px;
}
.footdiv {
background-color: #eee;
height: 50px;
}
.footdiv {
background-color: #eee;
height: 50px;
clear: both;
}
<div class="container">
<div class="floatdivLeft">左浮动div</div>
<div class="floatdivRight">右浮动div</div>
<div class="clearfix"></div>
<div class="footdiv">页脚</div>
</div>
.clearfix {
clear: both;
}
.clearfix:after {
content: ".";
display: block;
height:;
clear: both;
visibility: hidden;
}
.clearfix{
*display: inline-block;
}
.clearfix{
*zoom:;
}
CSS定位与布局：浮动的更多相关文章
- CSS定位与布局：普通流
CSS定位与布局属于CSS的基础,也是CSS布局影响很大的一部分,具体主要包括三种定位与布局机制( Positioning schemes):普通流,浮动,绝对定位. 其实除了这三种之外,还有一些定位 ...
- web前端css定位position和浮动float
最近做了几个项目:配资公司,ecmal商城等,客户对前台要求都很高.所以,今天来谈谈css的基础,以及核心,定位问题. div.h1或p元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框 ...
- CSS定位机制之浮动定位float
一.浮动定位实现的效果 二.使用float实现浮动定位 三.使用clear属性清除浮动定位 四.浮动定位的应用(布局) 一.浮动定位实现的效果 (一).块元素(div)在文档流中默认垂直排列,如果 ...
- CSS定位与布局
我们在编写网页代码时,首先应该做的就是设计好页面的布局形式,然后再往里面填充内容.网页布局的好与坏,直接决定了网页最终的展示效果.PC端常见的网页布局形式有两列布局.三列布局等.在CSS中,我们通常使 ...
- CSS定位机制：浮动 float及清除浮动的常用方法
CSS的定位机制 1.普通流(标准流) 默认状态,元素自动从左往右,从上往下排列 块元素的特征: 独占一行 可以设置宽高 如果不设置宽度,宽度默认为容器的100% 常见的块元素:div p h1-h6 ...
- CSS易混淆知识点总结与分享－定位与布局
CSS定位有四种模式:static.relative.absolute.fixed,其它static是默认值,下面分别讲解下各自的特点: static:静态定位,处于动态布局流中,按照页面中的各元素先 ...
- CSS定位（CSS定位概述、相对定位、绝对定位、浮动）
CSS 定位属性 CSS 定位属性允许你对元素进行定位. 属性 描述 position 把元素放置到一个静态的.相对的.绝对的.或固定的位置中. top 定义了一个定位元素的上外边距边界与其包含块上边 ...
- CSS定位——浮动定位
CSS定位机制Ⅱ——浮动定位 float属性:进行浮动定位 left,right clear属性:清除浮动 left,right,both ㈠ float属性 1.概述 ⑴div实现横向多 ...
- CSS定位布局
CSS定位布局 基础知识 在CSS布局中,定位布局也是一种非常常见的技术手段,我们以京东为例: 上面是非常好的例子,对于定位布局来说它可以将一个元素放在页面上的任意一个位置. 但是定位布局也不能滥用, ...
随机推荐
- vijos1083：小白逛公园
小白逛公园 描述 小新经常陪小白去公园玩,也就是所谓的遛狗啦…在小新家附近有一条“公园路”,路的一边从南到北依次排着n个公园,小白早就看花了眼,自己也不清楚该去哪些公园玩了. 一开始,小白就根据公园的 ...
- flex遭遇text-overflow:hidden，white-space:nowrap
最近在项目中遇到使用flex的时候,在flex-item元素中使用text-overflow:hidden:white-space:nowrap:进行省略文字的操作. 发现flex-item失控了,长 ...
- [oldboy-django][2深入django]xss攻击 + csrf
1 xss攻击 xss攻击(跨站脚本攻击,用户页面提交数据来盗取cookie) - 慎用safe, 和mark_safe -- 如果要用,必须要过滤 - 定义: 用户提交内容,在页面展示用html显示 ...
- 爬虫：Scrapy4 - Spiders
Spider 类定义了如何爬取某个(或某些)网站.包括了爬取的动作(例如:是否跟进链接)以及如何从网页的内容中提取结构化数据(爬取item).Spider就是定义爬取的动作以及分析某个网页(或者有些网 ...
- java 课堂笔记
- Sina微博OAuth2框架解密
自从sina微博oauth2出来以后, 第三方集成开发简单了很多. Oauth2不像oauth1一样需要后台httpclient请求那么麻烦, 一切都可以在前台使用ajax实现了. 很多人觉得蹊跷, ...
- 体验devstack安装openstack
由于公司制度,工作环境是不能直接上网的,所以在工作时间从没有体验过devstack或者其他联网方式安装openstack. 因自己购置了一台不错的主机,因而决定尝试安装一番,经过一段为期不短的内心极度 ...
- EasyUi DataGrid 获取选中行的checkbox
EasyUi DataGrid 获取选中行的checkbox var checked = $(":checkbox[name=ID]:checked"); console.log( ...
- [SDOI2009][bzoj1877] 晨跑 [费用流]
题面: 传送门 思路: 一个点只能走一回,路径不能相交...... 显然可以转化为网络流的决策来做 我们构建一个网络,令其最大流等于最大的跑步天数即可 怎么构造呢? 对于每个点只能走一次的限制,可以考 ...
- cf 853 B Jury Meeting [前缀和]
题面: 传送门 思路: 看完题目以后,首先有一个结论:每个人都是先去到首都,等待开会,开会结束以后再一个个走掉 而且这道题只有去首都和离开首都的机场 因此考虑计算去首都的飞机的前缀最小花费,以及离开首 ...