关闭

float属性理解

标签: css前端文档
526人阅读 评论(0) 收藏 举报
分类:

float属性详解 分析

float属性在css中是很常用到的一个属性,对于初学者和刚接触前端的人说,这是一个容易迷惑和出错的地方,用的好的话,对自己是帮助,用不好的话,对自己那就是灾难。
-float基础知识
float : 浮动的意思,,由于标准文档流是从上到下依次排列的,所以这里这个浮动也就是指定是从左或者从右进行浮动了。
使用float属性的时候尤其要注意的是 设置为浮动的组件会从当前文档流中脱离,同时,该浮动元素影响的不仅仅是自己,对周围也有浮动的影响。
例如:
<div class="box">
<span class="floatSpan">
浮动元素
</span
普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流
</div>

css代码如下

.box{ background-color: #FF00DE;
padding: 10px;
width:1000px;
height: 200px;
}
.floatSpan{
float: left;
margin: 10px;
width:100px;
height: 70px;
background-color: #CCCCCC;
}

效果如下:
这里写图片描述

由图可以看出,span元素本来是一个内联元素,不能设置宽高,但是在把其设置为浮动元素后就成为了块级元素,可以设置宽高了,但是同时它有没有换行,仅仅是以自己的宽度来撑开,并尽力向左浮动。

在了解float属性的细节之前,我们首先要知道,浮动元素的包含块的概念: 距离浮动元素最近的上一级的元素,不管元素是块级元素还是行级元素,只要设置了float属性,那这个元素就具有块级元素的特性,可以进行设置宽高。

0
0
查看评论

如何理解css中的float

最近一段时间一直在为一个即将上线的新站进行一些前端开发。自然,对CSS的使用是必不可少的了。我们在CSS中很多时候会用到浮动来布局。常见的有float:left或者float:right。简单点来说,前者是左浮动(往左侧向前边的非浮动元素飘,全是飘得元素的话,就按照流式来浮动从左到右,放不下则换行)...
  • sunwayMike
  • sunwayMike
  • 2010-12-28 21:39
  • 4865

float 属性理解

关于CSS中float属性的理解 首先,必须知道两件事: 1.       浏览器事按照HTML代码中对象声明的先后顺序,以流布局的方式来显示对象的.2.       HTML中的...
  • ZhlIsJacky
  • ZhlIsJacky
  • 2007-06-11 13:02
  • 520

float属性与clear属性综合讲解与实例

float属性与clear属性综合讲解与实例 一、float属性 对于float属性,要考虑两种布局情况, 1)父元素内容和本元素交错的布局 即父元素包含文本和子元素。该种情况还好理解,就是简单的文本环绕;例如在一个段落内除了文字外,还有图片(子元素), 此时若设置了float:left;...
  • garden55
  • garden55
  • 2016-06-27 17:21
  • 649

关于float的一些理解

Float是否脱离文档流,一个父元素不设置overflow的话,子元素float,就不会把父元素撑开,换句话说,他就不会有高度,但是做个demo:父元素overflow:hidden; 子元素前两个float,第三个不float,结果是第三个没有clear浮动的元素,跟float的元素出现在同一个位...
  • u014267351
  • u014267351
  • 2015-11-29 23:20
  • 817

理解float和clear属性

float:可以让其他元素环绕在它们周围。 元素是水平浮动的,只关心两个可能的值,right和left值 要根据父元素来浮动,即使父元素本身是浮动到右边。 当没有足够的空间放下浮动的元素时,将把它们移动到下一行。 claer:为了避免放置在浮动元素后面的所有元素都将在该浮动元素周围浮动。--...
  • hejiajiaming
  • hejiajiaming
  • 2018-01-09 11:43
  • 18

float 属性的本质理解

float 出现的意义其实只是用来让文字环绕图片而已,仅此而已。而我们目前用 float 实现页面布局本不是 float 该干的事情。 float 属性(无论是左浮动还是右浮动)某种意义上而言与 display:inline-block 属性的作用是一模一样的,所以类似于 display:...
  • Cherry4115
  • Cherry4115
  • 2016-02-15 12:18
  • 435

html居中的元素带有float属性

float设置浮动和margin设置居中两者本身就存在矛盾 解决办法是 在该元素外加一个div,设置div为居中,再设置该元素为float; 如图,我要设置蓝色背景的div居中,同时我又想让右侧的select框出现在图中位置。 如果设置div为margin:0 auto,则右边的se...
  • u012359618
  • u012359618
  • 2015-12-18 11:19
  • 1564

HTML中的float属性

有次偶然的机会我发现怎么用float属性都没有达到自己预期的属性,是什么情况呢,你看上图登录注册是排在一行的,整个是大的div,我想要的情况就是如上图所示但是,情况就是这两张图片总是在一列排着,整个div的宽度是300px。这两个小的div的宽度加起来一定要小于300px,假如登录的div是145p...
  • zhangguangzong_
  • zhangguangzong_
  • 2017-10-10 22:15
  • 159

float 原理,看懂这一篇,你就懂了!!!

CSS Float是网页设计最强大的灵活性功能之一。本文介绍CSS Float的基本原理和行为特征,并介绍各种浏器Float特性的Bugs。 内容 基本的浮动原理浮动是如何进行的浮动从何处开始水平浮动堆叠反向浮动Clearing Floats 基本的浮动原理 任何元素...
  • xiongzhengxiang
  • xiongzhengxiang
  • 2011-11-10 14:56
  • 2129

CSS: float属性和position属性的区别和应用

在使用div+css进行网页制作时,我们经常需要对某些元素进行一些必要的定位,使其能按照我们预想的效果呈现在页面合适的位置上,而float和position便是实现这一效果的两种方法。 一、浮动(float) float属性经常被运用于制作Horizontal Menu(横向菜单)和实现多列式网...
  • fivedoumi
  • fivedoumi
  • 2016-03-10 21:33
  • 1453
    个人资料
    • 访问:2700次
    • 积分:135
    • 等级:
    • 排名:千里之外
    • 原创:10篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条
    文章分类