div+css中float认识及css float用法，DIV CSS float浮动知识用法与float浮动教程篇Css样式的float浮动属性，用于设置标签对象（如：&div&标签盒子、&span&标签、&a&标签、&em&标签等html标签）的浮动布局，浮动也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。float是什么意思？float是浮动，翻译成中文也是浮动意思。进入对应css手册中float手册了解float基本信息。float的作用通过css定义float（浮动）让div样式层块，向左或向右（靠）浮动。float浮动教程目录float语法float应用与用法float浮动案例css浮动其他应用css浮动总结一、float语法 & - & TOPFloat常跟属性值left、right、noneFloat:none 不使用浮动Float:left 靠左浮动Float:right 靠右浮动float语法： float : none | left |right参数值： none : 　对象不浮动left : 　对象浮在左边right : 　对象浮在右边Float浮动结构分析图接下来我们来通过一个div+css实例讲解float使用技巧。二、float应用与用法 & - & TOPFloat浮动用于设置对象靠左与靠右浮动样式，可以实现我们所需要的让DIV、SPAN等标签居左居右浮动。简单使用语法div{float:left}&/*&css注释：设置div对象浮动靠左（left）&*/&div{float:right}&/*&css注释：设置div对象浮动靠右(right)&*/&三、css float浮动案例 & - & TOP我们设置一个盒子里，一个靠右、一个靠左浮动2个盒子，为了直观看到css浮动布局效果，我们对两个盒子设置一定宽度、高度和边框。1、主要的html代码片段：&div&class=&divcss5&&&&&&&&div&class=&divcss5_left&&布局靠左浮动&/div&&&&&&&div&class=&divcss5_right&&布局靠右浮动&/div&&&&&&&div&class=&clear&&&/div&&!--&html注释：清除float产生浮动&--&&&/div&&2、css代码片段：.divcss5{&width:400padding:10border:1px&solid&#F00}&.divcss5_left{&float:width:150border:1px&solid&#00F;height:50px}&.divcss5_right{&float:width:150border:1px&solid&#00F;height:50px}&.clear{&clear:both}&3、效果截图css div浮动float用法应用案例截图四、css+div浮动其它应用案例（休息阅读） & - &TOPDIV CSS实验一Css样式实例内容，我们让文字和图片在一个固定宽度div层内，让蓝色背景文字内容居右，小图片居左。&CSS案例演示最终效果图如下1、首先我们设置一个最外层的宽度为300px，高度为200px的css命名为box的css选择器代码如下（知识点px是什么意思）.box{width:300 height:200}2、设置box内的文字内容部分css样式命名为yangshi，并设置背景为蓝色，宽度为120px，居右浮动.yangshi{ width:120 float: background:#0066FF;}3、设置图片居左浮动div+css样式img { float:}4、body内的div布局，代码如下&&div class=&box&&&div class=&yangshi&&我是 网站，测试内容&/div&&img src=&demo.gif& /&&/div&说明：这里img标签是链接外部图片，图片名为demo.gif最终演示结果截图CSS实验二接下来我们演示使用div+css让这里小图片居右（上个例子是居左），蓝色背景文字内容区居左（上个例子是居右）(扩展css 居中)。这里我们只需要改变yangshi的float:为float:left和图片css样式img { float:}为img { float:}CSS代码如下：&.box{width:300 height:200}.yangshi{ width:120 float: background:#0066FF;}img{ float:}html中的css代码和内容不变最终演示结果截图如下：&希望通过以上两个css实例对你认识float有帮助。希望大家多少实际操作实践试试！扩展阅读：CSS清除浮动五、css浮动总结 & - & TOP我们要区别与文字内容靠左( text-align:left)靠右( text-align:right)样式，浮动只针对html标签设置靠左靠右浮动样式。float浮动样式没有靠中（浮动居中）的样式，如果需要让标签对象居中我们在css布局居中相关文字给大家详细讲解介绍（css margin）。这里记住浮动靠右使用float:right，浮动靠左使用float:left样式即可。html、css中的问题clear:both的含义问题，谢谢！一个html中有三个div分别叫做1、2、3，默认纵向排布。如果对1设置float:right==》2和3拱上去，1定位在右上角。如果对1设置float:left==》2和3拱上去，_百度作业帮
html、css中的问题clear:both的含义问题，谢谢！一个html中有三个div分别叫做1、2、3，默认纵向排布。如果对1设置float:right==》2和3拱上去，1定位在右上角。如果对1设置float:left==》2和3拱上去，
html、css中的问题clear:both的含义问题，谢谢！一个html中有三个div分别叫做1、2、3，默认纵向排布。如果对1设置float:right==》2和3拱上去，1定位在右上角。如果对1设置float:left==》2和3拱上去，并把1覆盖掉。如果这时候对2设置clear:both。那么无论1的浮动是左还是右，那么2和3不会拱上去。问题：对于这个clear:both不是很理解。如果这么理解，html的一个页面中有两个流即标准流和非标准流，如果设置float之后那么这个元素就进入了非标准流的行列。这时候，标准流和非标准流还是还不相干的（就好比两个透明的纸片重叠放着，怎么摆元素都不会影响到另一张纸片）。这个float的元素脱离标准流加入到非标准流后，原来标准流里的元素就会拱上去。但是这时候如果对标准流的第一个元素设置clear:both，那么就相当于对上面所有的非标准流的元素做了一个总结——“从我这一行开始，标准流排在非标准流的下边”。叙述的有点混乱，还望指点一下，或者说一下您对clear:both的形象理解。谢谢！
这个对于刚开始学DIV+CSS的人来说确实很纠结，我刚开是的时候也是这样，不过我的理解就是“浮动”和“清楚浮动”float的翻译就是浮动，至于是左浮动还是右浮动都一样了，浏览器的文档流可以理解成都是钉在浏览器里面的，而是用了浮动的东西呢就飘起来了，它会飘在浏览器的上面（当然不会飘出BODY去）。它飘起来了那它下面肯定就空了啊，空了浏览器就会吧钉在它上面的层填到它下面去，而浏览器是从左向右排列的，所以就出现了你看到的那些问题。而用CLEAR清楚浮动后就告诉浏览器下面的元素不受浮动的影响，也就是把浮动的层看成是不浮动的（可以这么理解）然后让浏览器继续往下渲染。就解决了你说的问题了~
clear:both这个简单的来说，清除左右的float元素，不允许两边有浮动元素，就是这个div独占一行，至于使用了clear:both并且float的div，前后若有行内元素，即inline，是会产生错位或者block元素和inline元素重叠html中div标签的relative属性是怎么用的，老搞不懂，请高手指点_百度知道
html中div标签的relative属性是怎么用的，老搞不懂，请高手指点
我有更好的答案
relative 应该是 CSS 中 position 属性的一个值吧，
用Div+CSS进行网站布局时，做一些浮动层等特殊特殊效果时要考虑到定位问题。这就要用到Position属性等。
Position属性有四个值：static、fixed、absolute和relative，
后面两个在布局中的定位里是经常用到的，顾名思义，
absolute是指绝对定位，即将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位，而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框。
ralative是指相对定位，就是依据left，right，top，bottom等属性在正常文档流中偏移位置。
但是，怎么个绝对法，又怎么个相对法呢？
以前我一直没有仔细去研究它，到具体应用时有时会有点迷糊，我相信很多朋友也会有这样的问题。今天我特意测...
其他类似问题
为您推荐：
div标签的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁不废话，先说解决办法著名的3像素Bug。你可以给img的css设置display:/*用来去除div下边莫名多出来的3px的像padding-bottom的东西。注:vertical-align: 亦可*/具体原因未知问一个DIV+CSS层级对应HTML的问题，求解答._百度知道
问一个DIV+CSS层级对应HTML的问题，求解答.
比如定义.wdsj{height:950height:300background:#000000;}.wdsj.sj1{height:950height:200background:#ff6600;}对应HTML代码写为&div class=&wdsj&&&div class=&sj1&&&/div&&/div&这样写为什么会失效呢？sj1为wdsj的下一级啊。
别说是我没写&style&&/style&啊。代码写成这样有效，搞不懂。.wdsj{height:950height:300background:#000000;}.wdsj_sj1{height:950height:200background:#ff6600;}对应HTML代码写为&div class=&wdsj&&&div class=&wdsj_sj1&&&/div&&/div&
提问者采纳
&div class=&wdsj&&
&div class=&sj1&&
&/div&&/div&LZ你这样写是对的啊，只是样式里面height:950height:200，俩个高度定义是不是写错了。不过这一点没有影响，我想你是应该写宽，而写成高了。你错的地方在于wdsj.sj1之间没有空格 应该是：wdsj .sj1
这样才能表示父子关系
提问者评价
是我粗心在wdsj .sj1之间少打了个空格，谢谢你啊，也谢谢2，3楼的朋友热心回答。
来自团队：
其他类似问题
为您推荐：
div的相关知识
其他2条回答
样式很简单，看不出什么问题有两种靠谱的可能：1、网页前面的那个格式没对（生产html的文件前面那段）。。2、你那段代码确实没生效..（加上style测试下吧..）
.wdsj.sj1 少了空格吧，sj1为wdsj的下一级 应该这样写：.wdsj .sj1 如果2个都生效 应该：.wdsj, .sj1
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁}