float详解
先上一个简单示例，了解一下float的使用
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fl0at</title>
<style type="text/css">
#Content{
height:600px;
margin-top:20px;
background:#90C; }
</style>
</head> <body>
<div id="Content">
<div style="float:left;height:400px; background:#f00;">Content-Left</div>
<div style=" height:400px; background:#fff;">Content-Main</div>
<div style="clear:both;"></div>
<div style="float:left;height: 50px; background-color: red;">左浮动</div>
<div style=" height:50px; background-color: blue;">">右浮动</div>
</div>
</body>
</html>
在Content-Main 和右浮动对应div里加上float:left或者给他们设置width如图：
float 属性的本质理解
float 出现的根本意义只是用来让文字环绕图片而已。而我们目前用 float 实现页面布局本不是 float 该干的事情。
float 属性（无论是左浮动还是右浮动）某种意义上而言与 display:inline-block 属性的作用是一模一样的，所以类似于 display:block; float:left; 的CSS代码超过95%的情况是没有道理的( display:block 是多余的)。然而，float无法等同于 display:inline-block，其中原因之一就是浮动的方向性，display:inline-block 仅仅一个水平排列方向，就是从左往右，而float可以从右往左排列，这就是两者的差异。然而，我们又有多少情况需要元素从右往左排列呢？很少。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fl0at</title>
<style type="text/css">
#Content{
height:600px;
margin-top:20px;
background:#90C; }
</style>
</head> <body>
<div id="Content">
<div style="display:inline-block ;height:400px; background:#f00;">Content-Left</div>
<div style="display:inline-block ;height:400px; background:#fff;">Content-Main</div>
<div style="display:inline-block ;margin-right:0px;padding-right:0px;height: 50px; background-color: red;">左浮动</div>
<div style="display:inline-block ;margin-left:0px;padding-left:0px;height:50px;background-color: blue;">">右浮动</div>
</div>
</body>
</html>
float 实现页面布局
浮动可以实现一行多列。
对一个元素声明clear:both，会将来自元素周围的的浮动清除，举一个简单的例子就是当先声明一个元素向左浮动时，那么这个元素的右边就会留出一部分空白，如果这个时候空间可以容下该元素的下一个元素的大小，那么由于此元素声明过浮动向左，那么下一个元素就会自动弥补留下的空间。那么相对这个补缺的元素（本身没有声明浮动），它有一个来自他左方的浮动，如果这个时候对这个补缺的元素声明clear: both;那么它就会忽略上一个元素的浮动声明而不去补之前的空缺。对#div1和#div2都声明了浮动向左，这个时候#div1之前是没有其他浮动元素的，clear：both并不会对之后的#div2产生影响，而相对#div2，由于它之前的#div1声明向左浮动，也就给#div2留出了一部分空间，那么由于#div1声明的向左浮动，#div2默认会自动补全，这个时候再对#div2声明clear:both就会起作用，它就跑到下面去了。若限制了parent元素的宽为100pixel,即使#div1向左浮动，也没有空间给#div2补全了，所以#div2只能跑下面去。
float详解的更多相关文章
- CSS浮动属性Float详解
什么是CSS Float? float 是 css 的定位属性.在传统的印刷布局中,文本可以按照需要围绕图片.一般把这种方式称为“文本环绕”.在网页设计中,应用了CSS的float属性的页面元素就像在 ...
- CSS布局(四) float详解
一.float设计初衷 因为float被设计出来的初衷是用于--文字环绕效果.即,一个图片一段文字,图片float:left之后,文字会环绕图片. <div style="width: ...
- [七]基础数据类型之Float详解
Float 基本数据类型float 的包装类 Float 类型的对象包含一个 float 类型的字段 属性简介 用来以二进制补码形式表示 float 值的比特位数 public sta ...
- 盒模型、position、float详解css重点汇总
元素类型 HTML 的元素可以分为两种: 块级元素(block level element) 内联元素(inline element 有的人也叫它行内元素) 两者的区别在于以下三点: 块级元素会独占一 ...
- CSS float详解
前言:在我们写CSS样式的时候,float,position,display,overflow这几个关键字用得比较多. 弄清楚他们之间的原理,我们可以更高效的写出我们想要的布局. 作者:Ry-yuan ...
- css浮动(float)详解
一.什么是浮动? 浮动,顾名思义,就是漂浮的意思.指的是一个元素脱离文档流,悬浮在父元素之上的现象. 二.如何产生浮动? 给元素本身添加float属性 float值: left 元素向左浮动. rig ...
- css浮动float详解
https://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html
- CSS定位属性Position详解
CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...
- 超详细：CSS-float详解
Float 详解 本文摘自:http://www.cnblogs.com/yuanchenqi/articles/5615774.html 首先要知道,div是块级元素,在页面中独占一行,自上而下排列 ...
随机推荐
- zookeeper系列（一）zookeeper图形化的客户端工具
追加一个zookeeper图形化的客户端工具: 1.zookeeper图像化客户端工具的下载地址:https://issues.apache.org/jira/secure/attachment/12 ...
- Windows环境下Zookeeper的安装和部署(单机模式和伪集群模式)
第一部分:单机模式 1)下载地址:http://www.pirbot.com/mirrors/apache/zookeeper/,建议下载stable版本 2)解压缩 将下载好的压缩包解压到指定目录, ...
- Backen-Development record 1
单例模式 在应用这个模式时,单例对象的类必须保证只有一个实例存在. 服务进程中的其他对象再通过这个单例对象获取这些配置信息.这种方式简化了在复杂环境下的配置管理. __new__实现 用装饰器实现单例 ...
- 百度地图java 判断当前位置是否在多边形区域内
package com.haiyisoft.cAssistant.adapter.hessian; import java.awt.geom.Point2D;import java.util.Arra ...
- 微信小程序之阻止冒泡事件
众所周知,在微信小程序给标签绑定点击方法大家都会想到 "bindtap" 但是在页面中会遇到 点击 会冒泡而触发其他元素的时间发生 那么怎么办呢 就把引发冒泡事件的始作俑者的 bi ...
- 八十三：redis之redis的字符串、过期时间、列表操作
字符串操作 设置值 set key value 设置有空格的值,加引号 set username 'hello world' 获取值 get key 删除值:del key 清除所有内容:flusha ...
- 判断对象当中有没有某一个属性（AS，JS，Java语言比较）
1.AS 首先说说AS里面如何判断,AS现在很少用这个语言了,当时我们公司的项目当中还有,所以就拿出来一块比较一下,代码如下: //利用Object属性判断 if("name" i ...
- springboot中静态属性/静态方法从YAML(yml)读取配置属性
启动类添加注解@EnableConfigurationProperties import jnetman.session.SnmpPref; import org.springframework.bo ...
- extentreports 测试报告引用extend.js/css失败
测试工程引用extentreports 生成的测试报告,因为报告中的js和css网络不通,所以页面乱码 解决思路: 下载需要的js.css放到测试工程的static目录下 下载extentreport ...
- 渗透测试 - KALI Linux 学习 - kali linux如何启动METASPLOIT服务
kali 2.0 已经没有metasploit 这个服务了,所以service metasploit start 的方式不起作用. 在kali 2.0中启动带数据库支持的MSF方式如下: #1 首先 ...