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布局中,定位布局也是一种非常常见的技术手段,我们以京东为例: 上面是非常好的例子,对于定位布局来说它可以将一个元素放在页面上的任意一个位置. 但是定位布局也不能滥用, ...
随机推荐
- git pull免密码拉取
ssh到服务器上,原来基于public/private key pair的方法不好使了. 1.1 创建文件存储GIT用户名和密码 在%HOME%目录中,一般为C:\users\Administrato ...
- Go语言之反射（一）
反射 反射是指在程序运行期对程序本身进行访问和修改的能力.程序在编译时,变量被转换为内存地址,变量名不会被编译器写入到可执行部分.在运行程序时,程序无法获取自身的信息.支持反射的语言可以在程序编译期将 ...
- Elastic Search和Kibana入门
一.ES配置 二.ES本地快速搭建集群 查看ES集群 查看node详细情况 三.Kibana配置 修改kibana的es配置 访问localhost:5601端口 四.Elasticsearch 术语 ...
- Java并发之(3):锁
锁是并发编程中的重要概念,用来控制多个线程对同一资源的并发访问,在支持并发的编程语言中都有体现,比如c++ python等.本文主要讲解Java中的锁,或者说是重入锁.之所以这么说是因为在Java中, ...
- uncompyle2反编译python的.py文件
前几天学用github,一不小心把a.py文件给删除了,由于1天没有提交,也无法找回.突然发现同a.py文件生成的编译文件a.pyc还在,逐去搜索一番反编译的方法. 查询得知python比较好的工具u ...
- PHP 获取客户端用户 IP 地址
一般情况下可以使用以下代码获取到用户 IP 地址 echo 'User IP - '.$_SERVER['REMOTE_ADDR']; // 服务器在局域网的话,那么显示的则是内网IP .// 如果服 ...
- http的一些知识
TCP/IP协议分层 应用层 TFP DNS DNS域名解析的过程 在浏览器DNS缓存中搜索 读取系统的hosts文件,查找其中是否有对应的ip 向本地配置的首选DNS服务器发起域名解析请求 HTTP ...
- HEAD DETACHED push origin失败问题
先说HEAD HEAD是一个头指针,通常情况下指向不同的分支,每个分支对应一个commit(准确的说,每个分支对应多个commit,但是只有一个顶层的commit,而commit之间是简单的线性关系. ...
- BootStrap导入及其使用
BootStrap主要是一个CSS框架,用于页面布局 <!DOCTYPE html> <html lang="en"> <head> <m ...
- BZOJ 1051：[HAOI2006]受欢迎的牛（强连通分量）
受欢迎的牛Description每一头牛的愿望就是变成一头最受欢迎的牛.现在有N头牛,给你M对整数(A,B),表示牛A认为牛B受欢迎. 这种关系是具有传递性的,如果A认为B受欢迎,B认为C受欢迎,那么 ...