CSS中，float浮动的理解

浮动什么意思呢，比如，默认的，我们知道，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浮动的理解相关推荐

css中float left与float right的使用说明
css中float left与float right的使用说明转自:http://www.jb51.net/css/33740.html 脚本之家 No! 要注意以下几点: 1. 浮动元素会被自 ...
html中的float含义,css中float是什么意思？
float是CSS中的浮动属性,当元素设置了float属性就会脱离标准流,浮动在其他元素上,它会根据属性值向左或者向右浮动. CSS中的float属性是一个频繁用到的属性,对于初学者来说,如果没有理解 ...
CSS之float浮动布局
css之float浮动布局浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 1. 浮 ...
css现在还用浮动吗,css3-9 css中的浮动怎么使用
css3-9 css中的浮动怎么使用一.总结一句话总结:用来做一般的行效果,比如说手机左右分布的头部导航栏.浮动的东西放到一个div中去,里面的内容根据需求左浮动或者右浮动,然后记得加上清除浮动. ...
Web前端，CSS中的浮动、清除浮动
前言持续总结输出中,今天分享的是Web前端,CSS中的浮动.清除浮动.浮动和清除浮动是我们常用的css样式.今天我们就来了解他们. 1.浮动的作用早期的作用:图文环绕现在的作用:网页布局 • 场 ...
CSS样式 float浮动用法
CSS样式 float浮动用法前言 Css样式的float浮动属性,用于设置标签对象(如:<div>标签盒子.<span>标签.<a>标签.<em>标 ...
css中float详解,CSS浮动属性Float详解？史上最全Float详解
我们在学习css样式的时候,都知道css是盒概念,并且每一个盒子都是一个元素,下面我们就对CSS浮动属性Float进行详解,让你彻底了解Float. 一:什么是Float浮动? Float浮动是css ...
CSS中的浮动float
1.1 什么是浮动? CSS 的 float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. float(浮动),往往是用于图像水平排列,或让列表水平排列,浮动在布局中非常有用. 1.2 ...
CSS中Float概念相关文章
float 是 css 的定位属性. 在传统的印刷布局中,文本可以按照需要围绕图片.一般把这种方式称为"文本环绕".在网页设计中,应用了CSS的float属性的页面元素就像在印刷布 ...
详细解读css中的浮动以及清除浮动的方法
对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家. 导读: 1.css块级元素讲解 2.css中浮动是如何产生的 3.出现浮动后,如何清除浮 ...

CSS中，float浮动的理解

CSS中，float浮动的理解相关推荐

最新文章

热门文章