CSS中,float浮动的理解

原创 2017年04月12日 16:35:51
浮动什么意思呢,比如,默认的,我们知道,div是占满一行的,现在我们想把两个div显示在一行上,那怎么办呢
<div style="width:100px;">11111</div><div style="width:150px">2222</div>
这样我们就设置了两个div,一个宽度100px,一个宽150px,可预览一下,我们的div仍在两行上,那么怎么把它改到一行上呢,这儿就需要float,设置第一个div的float为left
<div style="width:100px;float:left;">11111</div><div style="width:150px">2222</div>
再预览,就可以看到,它们到一行上了。
clear是什么意思呢,clear是清除的意思,它有三个值,left,right,both
很好理解,如果设置了clear:left,它就不怕它的左边有float,同理clear:right,clear:both,是左右都不让有float
举个例子,还是上面的
我们设置第二个div的clear:left,也就是不让它左边有float
<div style="width:100px;float:left;">11111</div><div style="width:150px;clear:left;">2222</div>
我们预览一下,就可以看到,尽管第一个div已经float:left了,这两个div仍然在两行上,就是由于第二个div不让它左边有float
因为css的定义是后面的可以覆盖前面的,明白了吧

css中float浮动原理及使用方法

先看一下在w3c中对于float的解释 float被归类于CSS 定位属性(Positioning) 描述:规定框是否应该浮动。 定义和用法:float 属性定义元素在哪个方向浮动。以往这个属性...
  • qq_20404903
  • qq_20404903
  • 2015年10月10日 15:12
  • 5177

CSS概念之定位体系(绝对定位position/浮动float/display)

原文摘自: 三种定位体系简介 框( box )布局影响因素之一,便是定位体系。定位体系也是其最为重要的影响因素。 CSS2.1 中,一个框可以根据三种定位体系布局。CSS2.1 中的...
  • ruoyiqing
  • ruoyiqing
  • 2014年08月31日 21:36
  • 1536

CSS浮动原理

CSS Float是网页设计最强大的灵活性功能之一。本文介绍CSS Float的基本原理和行为特征,并介绍各种浏器Float特性的Bugs。 内容 基本的浮动原理 浮动是如何进行的 ...
  • fishsoul
  • fishsoul
  • 2007年09月20日 12:40
  • 8512

如何理解css中的float

最近一段时间一直在为一个即将上线的新站进行一些前端开发。自然,对CSS的使用是必不可少的了。我们在CSS中很多时候会用到浮动来布局。常见的有float:left或者float:right。简单点来说,...
  • sunwayMike
  • sunwayMike
  • 2010年12月28日 21:39
  • 4866

CSS浮动Float——基础知识及兼容性问题

先说一下浮动的基本定义:浮动的框可以向左或向右移动,直到它的外边缘碰到父级边界或另一个浮动框的边框为止。由于浮动框不在文档流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。那么就要说一下文档流...
  • qq_34758023
  • qq_34758023
  • 2016年09月27日 16:12
  • 1264

[CSS]CSS浮动float详解(一):标准文档流

Web网页的制作,是一个流,必须自上而下依次进行。标准文档流流的比喻很形象,就像水流一样,必须从上而下,像织毛衣一样。 那么究竟什么是标准文档流呢?在web中,标准文档流有以下几个特点: 高矮不齐,...
  • xf616510229
  • xf616510229
  • 2016年12月15日 21:36
  • 755

解决内部容器float浮动后不能撑开外部容器及CSS伪类:after的使用

解决内部容器float浮动后不能撑开外部容器,外部容器塌陷问题 方法一: 直接在内部添加一个空的容器可以撑开外部容器。 方法二: .clearfix:after {     ...
  • z69183787
  • z69183787
  • 2014年02月08日 09:56
  • 1339

css:浮动的理解。

 css默认的布局是将元素一个一个地往下排列下来,如果不采取浮动,将导致页面非常长。下面我们通过做一个常见的网站布局,来说明浮动是怎么一回事。希望的效果是:   步骤一、先把代码写一下, 例:html...
  • pinklpig
  • pinklpig
  • 2010年05月14日 11:00
  • 1536

css3盒布局取代float布局

下面来写一个布局,上面分三列,底部还有两个一列。 1. 用float浮动来写 注意,上面三个div都固定了宽度且向左浮动,红色div使用clear:both属性 问题来了:就是上面三个浮动的div,高...
  • xuanwuziyou
  • xuanwuziyou
  • 2015年08月30日 18:40
  • 1675

css禁止float浮动元素自动换行/定位问题

n个这个元素(总小100000px); 关键就是在hidden元素内部再放一个div,然后设置足够大的空间,容浮动对象,不让它碰到到边而换行. 如果浮动+定位position配合,将需要给浮动元素的父...
  • qidizi
  • qidizi
  • 2013年04月09日 21:10
  • 6477
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS中,float浮动的理解
举报原因:
原因补充:

(最多只允许输入30个字)