一天搞定CSS： 浮动（float）及文档流--10
浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局； 恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下无特殊说明均指 windows 平台的 IE浏览器）。
下面我们就来详细说明浮动！！！！！！！！
1.文档流
在浮动中有一个文档流的概念，所以在这里不得不介绍一下文档流了。
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
文档流
文档中可显示的元素在排列时候的开始位置以及他们所占的区域
因为页面中的元素分为不同的种类，所以他们会按各自的特点去显示，在页面中所占的区域不是一样的。会按从上到下，从左到右的顺序输出内容
-->
<!--<span style="background: red;">kaivon</span>
<span style="background: red;">kaivon2</span>-->
<!--<span style="background: red;">kaivon</span>
<div style="width: 100px;height: 100px; background: red;">kaivon2</div>-->
<!--<span style="background: red;">kaivon</span>
<div style="width: 100px;height: 100px; background: red; display: inline-block;">kaivon2</div>-->
<div style="width: 100px;height: 100px; background: red; ">kaivon1</div>
<div style="width: 100px;height: 100px; background: green;">kaivon2</div>
</body>
</html>
2.浮动
浮动：
使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者相邻的浮动元素就会停下来
浮动的目的：
为了达到自己的布局目的，让指定元素定位在指定位置，我们就需要用到浮动。
3.概述浮动float
通过控制属性float来，控制元素的位置
float取值：
1）left：向左浮动
2）right：向右浮动
3）none：没有浮动，默认值
4.浮动的特点
5.代码演示
1）.特点1234演示
1、块元素可以在一行显示
2、按照一个指定的方向移动，遇到父级的边界或者相邻的浮动元素就会停下来
3、行内元素支持宽高
4、脱离文档流
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 200px;
background: green;
color: #fff;
float: left;
}
span{
background: red;
width: 100px;
height: 200px;
float: right;
}
.father{
float: none;
border: 1px solid blue;
margin: 100px;
background:none;
width: 100%;
height: 500px;
}
a{
float: right;
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<!--
浮动 float
定义 使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者相邻的浮动元素就会停下来
值 left、right、none
特征
1、块元素可以在一行显示
2、按照一个指定的方向移动，遇到父级的边界或者相邻的浮动元素就会停下来
3、行内元素支持宽高
4、脱离文档流
-->
<!--2、按照一个指定的方向移动，遇到父级的边界或者相邻的浮动元素就会停下来 最外层的div.father就是一个父容器-->
<div class="father">
<!--1、块元素可以在一行显示-->
<div>div1</div>
<div style="background: red;">div2</div>
<!--3、行内元素支持宽高 a, span标签并没有做类型转变，那它是一个行内标签，是不能设置宽高的，但是这里可以了-->
<span>span1</span>
<a href="">a22222</a>
</div>
<!--4、脱离文档流 此时所有.father下的所有div，span，a标签都不是按正常的文档流循序排列了，说明脱离了文档流-->
</body>
</html>
2）.特点56演示
5、块元素默认宽度会被改变（包裹性）
6、父级高度塌陷（破坏性）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.parent{
border: 1px solid #f00;
}
.box{
width: 100px;
height: 200px;
background: green;
color: #fff;
float: left;
}
.width{
height: 50px;
border: 5px solid #0000FF;
float: left;
}
</style>
</head>
<body>
<!--
浮动 float
定义 使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者相邻的浮动元素就会停下来
值 left、right、none
特征
1、块元素可以在一行显示
2、按照一个指定的方向移动，遇到父级的边界或者相邻的浮动元素就会停下来
3、行内元素支持宽高
4、脱离文档流
浮动后跟的元素（没有浮动）的位置是从前面浮动元素的位置开始的
注意：非浮动元素里的内容会留出前面浮动元素的位置(盒模型的位置)
5、块元素默认宽度会被改变（包裹性）
块元素不设置宽度，那宽度会自动变成内容所撑开的宽度
6、父级高度塌陷（破坏性）
子元素有浮云后，那父级元素的高度不会自动撑开了
-->
<!--5、块元素默认宽度会被改变（包裹性） 正常情况下div会默认占据一行，浮动后宽高就由内容撑开-->
<div class="width">alibaba</div>
<!--6、父级高度塌陷（破坏性）-->
<div class="parent">
<div class="box">box</div>
</div>
</body>
</html>
3）.特点7演示
7、换行不会被解析成空格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.parent{
border: 1px solid #f00;
}
.box{
width: 100px;
height: 200px;
background: green;
color: #fff;
float: left;
}
</style>
</head>
<body>
<!--
浮动 float
定义 使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者相邻的浮动元素就会停下来
值 left、right、none
特征
1、块元素可以在一行显示
2、按照一个指定的方向移动，遇到父级的边界或者相邻的浮动元素就会停下来
3、行内元素支持宽高
4、脱离文档流
浮动后跟的元素（没有浮动）的位置是从前面浮动元素的位置开始的
注意：非浮动元素里的内容会留出前面浮动元素的位置(盒模型的位置)
5、块元素默认宽度会被改变（包裹性）
块元素不设置宽度，那宽度会自动变成内容所撑开的宽度
6、父级高度塌陷（破坏性）
子元素有浮云后，那父级元素的高度不会自动撑开了
7、换行不会被解析成空格
浮云后的元素就会脱离文档流了，那它就不属于文档流里的结构了，所以换行、空格都跟父级没关系了
-->
<!--7、换行不会被解析成空格-->
<div class="parent">
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
</div>
</body>
</html>
6.浮动的副作用
地址：http://blog.csdn.net/baidu_37107022/article/details/71554283
7.清除浮动
地址：http://blog.csdn.net/baidu_37107022/article/details/71557806
一天搞定CSS： 浮动（float）及文档流--10的更多相关文章
- CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别
1.代码 (1)示例代码1 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=& ...
- 前端基础-CSS如何布局以及文档流
一. 网页布局方式 二. 标准流 三. 浮动流 四. 定位流 一. 网页布局方式 1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式, 比如word,nodpad ...
- css盒子模型、文档流、相对与绝对定位、浮动与清除模型
一.CSS中的盒子模型 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在混杂模式下,页面以一种比较宽松的向后兼容的方式显示.混杂模式通常模拟老式浏览器的行为以防止老站点无法工作. h ...
- 认识CSS中布局之文档流、浮动、定位以及叠放次序
前端之HTML,CSS(七) CSS CSS布局的核心就是盒子的摆放,即CSS定位.而CSS中定位机制分为:普通流(nomal flow).浮动(float).定位(position). 普通流 普通 ...
- 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline ...
- css排版之-标准文档流
标准流指的是在不使用其他的与排列和定位相关的特殊CSS规则时,各种元素的排列规则.HTML文档中的元素可以分为两大类:行内元素和块级元素. 1.行内元素不占据单独的空间,依附于块级元素,行 ...
- 1小时搞定vuepress快速制作vue文档/博客+免费部署预览
先来一下演示效果.和vue的官方文档几乎是一致的,页面内容都可自定义. 此教程部署后的效果预览. 在你跟着教程搭建好项目之后,你会收获: 快速搭建一个文档/博客,后期只需要修改markdown内容和导 ...
- CSS的布局之文档流，与行内/块级元素的延伸
文档流,即(position:stiatic),是html布局机制的默认状态. 文档流在排列的过程中,块级元素从上到下,行内元素,从左到右. ·块级元素 <div> <h系列> ...
- css浮动Float
核心:浮动元素会脱离文档流并向左/向右移动,直到碰到父元素或者另外一个浮动元素. float :left 向左浮动 right 向右浮动 none (默认) inherit 继承父元素 fl ...
随机推荐
- DirectFB 之 FillRectangle 绘制矩形
1. 函数原型解析 函数声明: DFBResult FillRectangle ( IDirectFBSurface * thiz, int x, int ...
- MySQL索引及查询优化总结
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:谢庆玲 文章<MySQL查询分析>讲述了使用MySQL慢查询和explain命令来定位mys ...
- A*算法的理解与简单实现
基本定义 一种寻路算法,特点是:启发式的,效率高,基本思路比较简单. 用途 寻路.在指定的地图上,考虑到地图上的移动代价,找到最优的路径. 核心概念 开表,闭表,估值函数. 开表 开表,记录了当前需要 ...
- poj2481 Cows 树状数组
题目链接:http://poj.org/problem?id=2481 解题思路: 这道题对每组数据进行查询,是树状数组的应用.对于二维的树状数组, 首先想到排序.现在对输入的数据按右值从大到小排序, ...
- 用Docker在一台笔记本电脑上搭建一个具有10个节点7种角色的Hadoop集群（上）-快速上手Docker
如果想在一台电脑上搭建一个多节点的Hadoop集群,传统的方式是使用多个虚拟机.但这种方式占用的资源比较多,一台笔记本能同时运行的虚拟机的数量是很有限的.这个时候我们可以使用Docker.Docker ...
- Redis学习-Set
在Redis中,Set类型是没有排序的字符集合,和List类型一样,可以在该类型的数据值上执行添加.删除或判断某一元素是否存在等操作.需要说明的是,这些操作的时间复杂度为O(1),即常量时间内完成次操 ...
- RabbitMQ集群和失败处理
RabbitMQ内建集群的设计用于完成两个目标:允许消费者和生产者在RabbitMQ节点在奔溃的情况下继续运行,以及通过添加更多的节点来线性扩展消息通信的吞吐量.当失去一个RabbitMQ节点时客户端 ...
- NIO原理剖析与Netty初步----浅谈高性能服务器开发（一）
除特别注明外,本站所有文章均为原创,转载请注明地址 在博主不长的工作经历中,NIO用的并不多,由于使用原生的Java NIO编程的复杂性,大多数时候我们会选择Netty,mina等开源框架,但理解NI ...
- winform无边框窗口拖动
无边框的窗口想拖动,只需要在置顶的容器上添加对应的mousedown 和 mousemove 事件就可以实现了.代码如下: //拖动窗口 private Point mPoint = new Poin ...
- OpenCV探索之路（七）：霍夫变换
我们如何在图像中快速识别出其中的圆和直线?一个非常有效的方法就是霍夫变换,它是图像中识别各种几何形状的基本算法之一. 霍夫线变换 霍夫线变换是一种在图像中寻找直线的方法.OpenCV中支持三种霍夫线变 ...