浮动定位可以是原本垂直排列的块级元素，变成水平排列

1浮动元素 float:left 或者float:right  这些浮动会直接碰到父容器的边界为止。

2设置了浮动的元素，元素会脱离标准文档流中，但是元素内容会仍然占据文档流中的空间

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>float定位</title>

</head>

<style>

  .wrapper{

  	width: 880px;

  	height: 300px;

  	margin:0 auto;

  	position: relative;

  }

  .left{

  	float: left;

  	height: 300px;

  	background-color: #198610;

  }

</style>

<body>

	<div class="wrapper">

		<div class="left">float:left</div>

		<p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>

	</div>

</body>

</html>

　　

大家可以看出来上面说的第二点和下面的第三点，如果没有浮动的话，那么div直接占据一行空间。

3当元素没有设置宽度值，而设置了浮动属性，元素的宽度随内容的变化而变化，会包裹内容

4.可以实现横向多列布局,这个上几篇文章也说了

5.常用清除浮动的方法

1.用一个clear属性设置 both;

2 或者 设置width:100%;(或固定宽度) + overflow:hidden;

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>float定位</title>

</head>

<style>

  .wrapper{

  	width: 880px;

  	height: 300px;

  	margin:0 auto;

  	position: relative;

  }

  .left{

  	float: left;

  	height: 300px;

  	background-color: #198610;

  }

  .content{

  	clear:both;

  }

</style>

<body>

	<div class="wrapper">

		<div class="left">float:left</div>

		<p class="content">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>

	</div>

</body>

</html>

　这里是设置在p标签中，其实总结一下就是 clear:both ,一般放在浮动元素之后的元素中

　第二种清除的方式的属性最好放到浮动元素的父级元素中如下

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>float定位</title>

</head>

<style>

  .wrapper{

  	width: 880px;

  	margin:0 auto;

  	position: relative;

  	overflow: hidden;

  }

  .left{

  	float: left;

  	height: 300px;

  	background-color: #198610;

  }

  .content{

  	width: 880px;

  	margin: 0 auto;

  }

</style>

<body>

	<div class="wrapper">

		<div class="left">float:left</div>

	</div>

	<p class="content">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>

</body>

</html>

　　

css定位之浮动定位的更多相关文章

  1. CSS入门(定位之浮动定位、伪类之鼠标悬停、光标修改和透明度修改和列表样式)

    一.定位 所为定位,实际上就是定义元素框相对于其正常位置,应该出现在哪儿 定位就是改变元素在页面上的默认位置 分类: 普通流定位(元素默认的定位方式) 浮动定位 相对定位 绝对定位 固定定位 1.普通 ...

  2. CSS定位——浮动定位

    CSS定位机制Ⅱ——浮动定位 float属性:进行浮动定位   left,right clear属性:清除浮动   left,right,both  ㈠  float属性 1.概述 ⑴div实现横向多 ...

  3. CSS中的浮动和定位

    在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性 标准流的默认特性 1.分行.块级元素,并且能够dispay转换. 2.块级元素(block):默认独占一行,不能并列显示,能够设 ...

  4. css清除浮动定位造成的异常

    清除浮动是为了解决高度塌陷的问题:内层有好几个div有宽有高,并且选择了浮动定位,但是外层的div却并没有设置宽高.在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动( ...

  5. CSS：CSS定位和浮动

    CSS2.1规定了3种定位方案 1.Normal flow:普通流(相对定位 position relative.静态定位 position static) 普通流(normal flow,国内有人翻 ...

  6. CSS彻底研究(3) - 浮动,定位

    Github pages 博文 CSS彻底研究(3)-浮动,定位 一 . 浮动float I . 定义及规则 float默认为none,对应标准流的情况.当float : left;时,元素就会向其父 ...

  7. 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)

    html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...

  8. CSS中的定位与浮动

    CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:st ...

  9. 深入css布局篇(2) — 定位与浮动

    深入css布局(2) - 定位与浮动      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...

随机推荐

  1. DOM解析

    1.xml可扩展标记语言(Extensible Makeup Language) 最简单的声明语法: <?xml version="1.0" ?> 用encoding属 ...

  2. java ftp下载文件

    1.使用官方正规的jar commons-net-1.4.1.jar jakarta-oro-2.0.8.jar 注意:使用ftp从windows服务器下载文件和从linux服务器下载文件不一样 2. ...

  3. tcp粘包，udp丢包

    TCP是面向流的, 流, 要说明就像河水一样, 只要有水, 就会一直流向低处, 不会间断. TCP为了提高传输效率, 发送数据的时候, 并不是直接发送数据到网路, 而是先暂存到系统缓冲, 超过时间或者 ...

  4. POJ 2876 Cantoring Along

    Description The Cantor set was discovered by Georg Cantor. It is one of the simpler fractals. It is ...

  5. 基于webrtc的视频通话时webrtc的接口调用流程

    场景: 1.A call B 2.B answer 3.A connected with B 共同的步骤: A 和 B 都需要初始化webrtc模块,创建peerconnectionfactory 步 ...

  6. 2. Swift元组|可选值|断言

    1. 元组英文名字 Tuple,将多个数据类型(任意类型)组合成一个数据,与c语言的中的机构体有几分相似,功能也是非常强大的,尤其是在定义请求参数,状态之类的地方经常用到. let http404Er ...

  7. uploadify springMVC

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  8. [HIHO1052]基因工程（找规律）

    题目链接:http://hihocoder.com/problemset/problem/1052 题意:中文题面,就是修改其中几个字符,使得[0,k-1]和[n-k,n-1]的字符相同. 会发现一个 ...

  9. [java基础]循环结构1

    [java基础]循环结构1 循环结构:for循环,while循环,do_while循环在,增强型for循环 /** 文件路径:G:\JavaByHands\循环语句\ 文件名称:WhileTest.j ...

  10. Linux nginx日志按天分割实例

    Linux nginx日志按天分割实例   nginx的日志有个小缺点,日志文件一直就是一个,不会自动地进行切割,如果访问量很大的话,将导致日志文件非常大,不便于管理这就需要我们自己来实现了,按日期每 ...