css定位之浮动定位
浮动定位可以是原本垂直排列的块级元素，变成水平排列
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定位之浮动定位的更多相关文章
- CSS入门(定位之浮动定位、伪类之鼠标悬停、光标修改和透明度修改和列表样式)
一.定位 所为定位,实际上就是定义元素框相对于其正常位置,应该出现在哪儿 定位就是改变元素在页面上的默认位置 分类: 普通流定位(元素默认的定位方式) 浮动定位 相对定位 绝对定位 固定定位 1.普通 ...
- CSS定位——浮动定位
CSS定位机制Ⅱ——浮动定位 float属性:进行浮动定位 left,right clear属性:清除浮动 left,right,both ㈠ float属性 1.概述 ⑴div实现横向多 ...
- CSS中的浮动和定位
在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性 标准流的默认特性 1.分行.块级元素,并且能够dispay转换. 2.块级元素(block):默认独占一行,不能并列显示,能够设 ...
- css清除浮动定位造成的异常
清除浮动是为了解决高度塌陷的问题:内层有好几个div有宽有高,并且选择了浮动定位,但是外层的div却并没有设置宽高.在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动( ...
- CSS：CSS定位和浮动
CSS2.1规定了3种定位方案 1.Normal flow:普通流(相对定位 position relative.静态定位 position static) 普通流(normal flow,国内有人翻 ...
- CSS彻底研究(3) - 浮动,定位
Github pages 博文 CSS彻底研究(3)-浮动,定位 一 . 浮动float I . 定义及规则 float默认为none,对应标准流的情况.当float : left;时,元素就会向其父 ...
- 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)
html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...
- CSS中的定位与浮动
CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:st ...
- 深入css布局篇(2) — 定位与浮动
深入css布局(2) - 定位与浮动 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...
随机推荐
- CSS 笔记一（Selectors/ Backgrounds/ Borders/ Margins/ Padding/ Height and Width）
Selectors/ Backgrounds/ Borders/ Margins/ Padding/ Height and Width CSS Introduction: CSS stands for ...
- [转] 停止支持的老版本ubuntu源列表-old-releases
我使用的是ubuntu 9.10,在网上找了大半个月之后,今天终于找到了可用的源地址.感谢这位cgjcgs仁兄. 点击阅读原文 ubuntu的普通版本支持的时间都有限,过了支持的时间,更新源都会被停用 ...
- ClippingNode实现新手引导高亮裁切
ClippingNode的使用 概述 ClippingNode(裁剪节点)可以用来对节点进行裁剪,可以根据一个模板切割图片的节点,生成任何形状的节点显示. ClippingNode是Node的子类,可 ...
- linux初始化配置-----网络配置
一.设置linux网络 1)零时设置ip地址 由于centos7默认没有ifconfig命令所以为了使用方便我们先安装net-tool使我们能使用ifconfig命令查看ip地址 ·挂载系统光盘 [r ...
- python基础（三元运算+深浅拷贝+函数参数）
三元运算 三元运算,又称三目运算,主要作用是减少代码量,是对简单的条件语句的缩写. 书写格式: result = 值1 if 条件 else 值2 即如果条件成立,则将值1赋给result变量,如果不 ...
- php程序员的水平 看看自己属于那个级别的
文章链接:http://www.oschina.net/question/570781_60150?sort=time&p=4#answers
- aws在线技术峰会笔记-游戏解决方案
选项1:可以将aws的SDK嵌入到APP中. 选项2:Mobile Hub自动生成代码. 选项3:开源免费的游戏引擎.可视化脚本编程,实现客户端的逻辑代码. 用户管理 Cognito Identity ...
- 【转】IP分片和TCP分段
ZC: 由于 TCP中 MSS 的关系,TCP 不会造成 IP分片和TCP分段 ! 1.http://zhidao.baidu.com/link?url=YCnR8B-1EN4-cgauRtwa-iV ...
- HDU4511 AC自动机+dijkstra
题意: Description 终于放寒假了,小明要和女朋友一起去看电影.这天,女朋友想给小明一个考验,在小明正准备出发的时候,女朋友告诉他,她在电影院等他,小明过来的路线必须满足给定的规则: 1. ...
- oracle 之 函数
本次主题 青涩/色 函数的结束一定要使用return语句返回一个与声明匹配的值 --语法: create[or replace] function<函数名> [(参数列表)] return ...