html 关于浮动的事

浮动
　　float：left，right，none，
注意：浮动元素会把当前的块级元素变成内联元素

清除浮动

clear：both（清除左右浮动）；left（清除左边浮动）；right（清除右边浮动）；

overflow：none（清除浮动）；hidden（隐藏）；scroll（滚动）；auto（自动（滚动效果））；

元素定位（position）
relative：相对定位
absolute：绝对定位
fixed：固定（建议不要使用，部分浏览器必兼容）
注意：相对定位和绝对定位起点都在它们父标签的左上角；绝对布局一定设置top或者left才会生效。

1重叠关系（z-index）
默认关系为0
值可以是任何整数
值越大，位置在越前面
2透明度
opacity：0~1值越小越透明

时间： 2024-11-09 09:38:30

html 关于浮动的事的相关文章

CSS之浮动那些事

1.清除浮动 下面是两种常用的方式,而这两招也够用了(不用千招会,只需一招精). 1.结尾处加空div标签 clear:both <style type="text/css"> .left{float:left;} .right{float:right;} /*清除浮动代码*/ .clearfloat{clear:both} </style> <div> <div class="left">Left</div&g

清楚浮动的那些事

我们经常碰到的一种布局问题,就是两个容器并排分布. 这时候我们考虑的就是如何实现,如果是小容器我们考虑的可能是display:inblock来实现 但是如果是两个大容器,更多的时候我考虑的都是浮动来完成布局. 但是很多时候我们对去清除浮动都是一种似懂非懂的方法,关于清除浮动有以下几个常见的方法: 一.父级容器给死高度 这样的话就能很好的解决浮动的问题,但是也有一定的局限性.很多时候我们的父容器的的高度都是自动的,根本不能定死. 所以这时候就需要用到其他的方法. 二.浮动容器后面加一个空div标签

（转）CSS浮动，你不知道的事

原文链接:http://www.cnblogs.com/zhujl/archive/2012/05/08/2489440.html 浮动到底做了什么? 浮动如何影响元素的盒模型? 浮动的元素和行内元素有何不同? 调整浮动元素的位置是通过什么规则进行的? clear属性如何工作,它的目的又是什么? 浮动甚至能绊倒有经验的开发者,理解浮动能帮助你解决很多CSS问题.即使你认为已经知道了浮动的所有知识,我们足够深入的分析也许也能让你学到一些新东西. 什么是浮动? CSS中的一些元素是块级元素,表示它们

CSS 关于浮动的那些事

相信每个初学html5的童鞋都或多或少的对float浮动这一属性迷茫过,下面让我来为大家列举一下关于浮动的特性. 一.浮动元素会脱离文档流 何为脱离文档流?假设我们在纸上写字,每一个字代表一个元素,我们让其中的一个字原地漂浮起来,那么我们会说这个字脱离了原先的位置,即脱离了文档.当我们给一个元素加入float属性时,它就跟字一样脱离了原先的位置,不再占用原本的位置,原本的位置便会空出来,假设有一个我们没有设置宽高属性的div,其中包含着一个元素,div在不设置高属性时,高默认是由内容撑出来,当我

CSS浮动、绝对、相对定位

浮动 float:属性{ float:none;    默认值,对象,不漂浮 float:left; 文本流向对象的右边 float:right; }; 清除浮动 clear:属性{ clear:none; 允许对象两遍都可以浮动 clear:left; 不允许左边有浮动 clear:right; 不允许右边有浮动 clear:both; 两遍都不允许有浮动 }; 定位 position:属性{ position:static;   静态定位 position:fixed;    固定定位 po

css之浮动

不得不说float是件很恶心的事情,最开始学习布局时利用各种各样的float,最后搞的晕头转向.现在发现,一个好的网页制作使用float越少它的后续可开发性越高.但使用float时不可避免的,现在就说一说float那点事. float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 文档流是相对于盒子模型讲的:文本流是相对于文子段落讲的.元素浮动之后,会让它跳出文档流,也就是说

关于HTML中浮动与清除的思考

布局时需要利用浮动(float)的属性,同时我们需要一个清除浮动(clear)与之配合才能达到预期的目标. w3s上关于float和clear的定义分别为:float:float 属性定义元素在哪个方向浮动. clear:clear 属性设置一个元素的侧面是否允许其他的浮动元素. 一个简单的例子(代码什么的我就不贴出来了:)): 这是我们通过浮动然后清理浮动(clear:both)之后预期想要达到的效果. 如果不清理浮动会是怎样?只清理右边呢?只清理左边呢? <!--没有清理浮动的效果--!>

css基础（浮动 清除f浮动）

文档流(标准流) 1.元素自上而下,自左而右 2.块元素,独占一行,行内元素在一行上显示,碰到父级元素的边框换行 浮动left 浮动的框可以向左或是向右移动,直到它的边缘碰到包含框或是另个浮动框的边框为止 特点 设置了浮动的元素不占原来的位置(不在标准流) 可以让块级元素在一行显示 浮动可以行内元素为行内块元素 注意:转化过程尽可能用display转化 浮动的用途 文本绕图 <head> <meta charset="UTF-8"> <title>&

拜拜了,浮动布局-基于display:inline-block的列表布局——张鑫旭

一.一抹前言 没有爱的日子,时间如指尖细沙,不知不觉就流逝了.写“CSS float浮动的深入研究.详解及拓展(一)”和“CSS float浮动的深入研究.详解及拓展(二)”似乎就在不久前,然而相隔差不多有一年之久了.文章最后留下了“浮动布局更好的替代方案是什么?”后文再介绍的预告. 由于自己肚子中的货物不足以撑起一篇足够质量的文章,所以关于“浮动布局更好的替代方案是什么?”的文章一直并未动笔.好在事物总是在发展的,我也是每天都是在进步,对于列表布局的思考也愈发成熟.加上正好前不久又有人询问我“