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

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. WDR7500 花生壳问题

    新进一WDR7500 居然不能解析花生壳. 百度一番, 发现别人有同样的问题. 找来找去从别人的只言片语中发现需要升级固件. 好不容易加入一个群, 把固件下下来. 升级固件, 重新设置, 解析成功. ...

  2. [课程设计]Scrum 2.1 多鱼点餐系统开发进度（下单列表布局）

    [课程设计]Scrum 2.1 多鱼点餐系统开发进度(下单列表布局) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题:餐厅到店 ...

  3. [课程设计]Scrum 2.4 多鱼点餐系统开发进度(下单一览页面修复)

    Scrum 2.4 多鱼点餐系统开发进度  (下单一览页面修复) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题:餐厅到店点餐 ...

  4. Linux 2.6内核Makefile浅析

    1 概述 Makefile由五个部分组成: Makefile:根目录Makefile,它读取.config文件,并负责创建vmlinux(内核镜像)和modules(模块文件). .config:内核 ...

  5. [Android Studio] 按钮学习

    Android Studio 按钮 1. 添加一个按钮 新建一个 Blank Project 之后, 在 activity_main.xml: 中添加一个按钮, 可以使用design 模式来添加,: ...

  6. C语言：内存字节对齐详解[转载]

    一.什么是对齐,以及为什么要对齐: 1. 现代计算机中内存空间都是按照byte划分的,从理论上讲似乎对任何类型的变量的访问可以从任何地址开始,但实际情况是在访问特定变量的时候经常在特定的内存地址访问, ...

  7. SQL2008游标

    最近让写一个自动生成数据的存储过程,其中会遍历表中数据并做出相应处理,因为数据量不算太大所以使用到了游标,初识游标遇到几个小问题,所以来和大家一起分享一下: 使用游标的五个步骤: 1.声明游标 语法: ...

  8. Linux下Ruby开发配置

    以CentOS为例 安装ruby:yum install ruby 安装ruby devel:yum install ruby-devel,这个装上以后,就可以使用gem安装第三方模块了 安装gem, ...

  9. HDU-4528 小明系列故事——捉迷藏 BFS模拟

    题意:链接 分析:每一个D或者是E点往四面延伸,并且赋一个特殊的值,能看到D点的点赋值为1,能看到E点的点赋值为1000,这是因为最多100步,因此最后可以根据除以1000和对1000取模来得出某个状 ...

  10. Java面向对象三大特点之封装

    封装 含义:将对象的属性和行为封装起来,而将对象的属性和行为封装起来的载体是类,类通常对客户隐藏其实现细节,这就是封装的思想.封装最主要的功能在于我们能修改自己的实现代码,而不用修改那些调用我们代码的 ...