div+css里的清除和浮动是什么意思？_百度知道
div+css里的清除和浮动是什么意思？
浮清除浮般用DIV+CSS布局通情况使用DIV+CSS布局文档象都自依排列比写&div id=&a&&&/div&&div id=&b&&&/div&默认情况idb div 排 a我称种布局标准流设置浮象脱离标准流像水面漂浮物再严格按照标准流排列浮取值：left：象浮左边right：象浮右边clear 清楚左右 浮例面代码：&div
id=&container& &
&div id=&left&&&/div&
&div id=&right&&/div&
&div id=&bottom&&/div&&/div&left right
bottom 3div 排列我给left 添加浮属性 float:left,<img class="word-replace" src="/api/getdecpic?picenc=0a006ddiv左右排列left 浮影响面象我给bottom 添加句clear:both,bottom再排right右边我用clear:both清除前面浮象bottom影响
其他类似问题
按默认排序
其他1条回答
float 浮left rightnone clear 清楚float
div的相关知识
您可能关注的推广
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁css 怎么使浮动的板块居中啊_百度知道
css 怎么使浮动的板块居中啊
提问者采纳
二种1、父级div设置固定宽度加margin:0 级div加浮即实现；能限伸展；2、table内插入divdiv设置浮table设置margin:0 table要设置宽度table默认宽度化实现居效比较且限伸展注：些说table除非做表格其绝要用其实我比较喜欢用table布局重点布局div+css些容易错或者必须用table错选择都说div+css布局我呢说div+table+css布局
我用margin: 0 就行了
能不能详细的说一下
我会加分的
固定宽度的标签加了margin: 0后就可以居中，不需要作太多说明，如果加了浮动，那居中可能会失效举例：&div style=&margin:0 width:100 height:50 border:1&&&&#47;div&&div style=&margin:0 width:100 height:50 border:1&&&&#47;div&
提问者评价
按照你说的，真的成功了，好开心，谢谢你！
其他类似问题
margin:0 哦哦
意思 悬浮哈 悬浮般左或者右
想让集悬浮东西父窗口居实现&div 居&
&悬浮&&/div&
能不能详细的说一下margin:0
我不清楚什么详细的效果
按默认排序
其他2条回答
固定位置用position:top:50%;left:50%;
网站要窗口化
也要最大化
保证了一个
就能保证另外一个的排版
text align:center
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁清除浮动，这在CSS3中有着重要的意义，在很多时候，如果不清除浮动，那么您的网页很可能在FF中会出错，在IE中也不会有好的表现，造成页面变形扭曲，绝非你想要的效果。今天向大家介绍一种简洁易用的方法，有浮动的时候，给需要闭合的DIV（class为clearfix）加上如下的CSS样式。
一、浮动产生原因
一般浮动是什么情况呢？一般是一个盒子里使用了CSS float浮动属性，导致父级对象盒子不能被撑开，这样CSS float浮动就产生了。
浮动产生样式效果截图
本来两个黑色对象盒子是在红色盒子内，因为对两个黑色盒子使用了float浮动，所以两个黑色盒子产生了浮动，导致红色盒子不能撑开，这样浮动就产生了。
简单地说，浮动是因为使用了float:left或float:right或两者都是有了而产生的浮动。
二、浮动产生负作用 &
1、背景不能显示
由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。
2、边框不能撑开
如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。
3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。
三、css解决浮动，清除浮动方法 &
这里DIVCSS5为了统一讲解浮动解决方法，假设了有三个盒子对象，一个父级里包含了两个子级，子级一个使用了float:left属性，另外一个子级使用float:right属性。同时设置div css border，父级css边框颜色为红色，两个子级边框颜色为蓝色；父级CSS背景样式为黄色，两个子级背景为白色；父级css width宽度为400px，两个子级css宽度均为180px，两个子级再设置相同高度100px，父级css height高度暂不设置（通常为实际css布局时候这样父级都不设置高度，而高度是随内容增加自适应高度）。
父级CSS命名为“.divcss5”对应html标签使用“&div class="divcss5"&”
两个子级CSS命名分别为“.divcss5-left”“.divcss5-right”
根据以上描述DIVCSS5给出对应CSS代码和HTML代码片段
.divcss5{ width:400 border:1px solid #F00; background:#FF0}&
.divcss5-left,.divcss5-right{ width:180 height:100&
&border:1px solid #00F; background:#FFF}&
.divcss5-left{ float:left}&
.divcss5-right{ float:right}&
对应html源代码片段：
&div class="divcss5"&&
& & &div class="divcss5-left"&left浮动&/div&&
& & &div class="divcss5-right"&right浮动&/div&&
清除浮动前案例截图父级需要清除浮动
以下DIVCSS5总结了几点用于清除浮动的经验教程
1、对父级设置适合CSS高度
对父级设置适合高度样式清除浮动，这里对“.divcss5”设置一定高度即可，一般设置高度需要能确定内容高度才能设置。这里我们知道内容高度是100PX+上下边框为2px，这样具体父级高度为102px
.divcss5{ width:400border:1px solid #F00;background:#FF0; height:102px}&
.divcss5-left,.divcss5-right{width:180height:100&
border:1px solid #00F;background:#FFF}&
.divcss5-left{ float:left}&
.divcss5-right{ float:right}&
Html代码不变。得到截图
使用height高度清除浮动
小结，使用设置高度样式，清除浮动产生，前提是对象内容高度要能确定并能计算好。
2、clear:both清除浮动
为了统一样式，我们新建一个样式选择器CSS命名为“.clear”，并且对应选择器样式为“clear:both”，然后我们在父级“&/div&”结束前加此div引入“class="clear"”样式。这样即可清除浮动。
具体CSS代码：
.divcss5{ width:400border:1px solid #F00;background:#FF0}&
.divcss5-left,.divcss5-right{width:180height:100&
border:1px solid #00F;background:#FFF}&
.divcss5-left{ float:left}&
.divcss5-right{ float:right}&
.clear{ clear:both}&
Html代码：
&div class="divcss5"&&
& & &div class="divcss5-left"&left浮动&/div&&
& & &div class="divcss5-right"&right浮动&/div&&
& & &div class="clear"&&/div&&
clear清除浮动截图
clear清除浮动截图 使用CSS clear清除浮动
这个css clear清除float产生浮动，可以不用对父级设置高度 也无需技术父级高度，方便适用，但会多加CSS和HTML标签。
3、父级div定义 overflow:hidden
对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。
overflow:hidden解决CSS代码：
.divcss5{ width:400border:1px solid #F00;background:#FF0; overflow:hidden}&
.divcss5-left,.divcss5-right{width:180height:100
border:1px solid #00F;background:#FFF}&
.divcss5-left{ float:left}&
.divcss5-right{ float:right}&
HTML代码不变。
解决清除浮动后截图
overflow清除float产生浮动截图 overflow:hidden清除浮动截图
为什么加入overflow:hidden即可清除浮动呢？那是因为overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动。Css overflow:hidden清除浮动方法DIVCSS5推荐使用。
以上三点即是兼容各大浏览器清除浮动的方法，其它有的浏览器不兼容有的不兼容的方法就没必要介绍了，大家记住以上三点解决float浮动清除浮动方法。但这里推荐第三点和第二点解决清除浮动方法。
文章来源：森动网小鱼儿，转载请注明出处！
更多编程资源：
￥0 4947人购买
￥100 2558人购买
￥1 1645人购买
￥1 883人购买
￥1798 600人购买
￥0 9458人购买
￥69 1650人购买
￥299 971人购买
￥290 826人购买
￥89 808人购买
￥518 769人购买
￥180 717人购买
￥290 88人购买
￥260 79人购买
￥299 68人购买
￥288 61人购买
￥350 55人购买
最新优惠，最多折扣的优惠
价值:245 元&&&&仅售：&196
价值:1848 元&&&&仅售：&799
价值:2800 元&&&&仅售：&1350
价值:1000 元&&&&仅售：&799
价值:150 元&&&&仅售：&8.8
微信扫描添加森动网微信公众平台
森动在线客服随笔 - 21&
文章 - 0&评论 - 61&trackbacks - 0
float属性：定义元素朝哪个方向浮动。
1.页面标准文档流、浮动层、float属性
1.1 文档流
HTML页面的标准文档流(默认布局)是：从上到下，从左到右，遇块(块级元素)换行。
1.2 浮动层
浮动层：给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。
而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。内联元素：有空隙就插入。
1.3 float 属性介绍
　　① left ：元素向左浮动。
　　② right ：元素向右浮动。
　　③ none ：默认值。
　　④ inherit ：从父元素继承float属性。
1.4 相邻兄弟元素情况
相邻兄弟元素是否也包含了float属性，会影响布局。
1.5 默认布局图
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&title&2.3-float属性&/title&
&style type="text/css"&
background-color:Red;
height:50px;
width:<span style="background-color: #f5f5f5; color: #px;
background-color:Yellow;
height:50px;
width:<span style="background-color: #f5f5f5; color: #px;
background-color:Blue;
height:50px;
width:<span style="background-color: #f5f5f5; color: #px;
background-color:Gray;
height:50px;
width:<span style="background-color: #f5f5f5; color: #px;
&div id=a &div-a&/div&
&div id=b&div-b&/div&
&div id=c&div-c&/div&
&input type="text" value="input1"
&input type="text" value="input2" /&
&input type="text" value="input3 " /&
&div id=d&div-d&/div&
&input type="text" value="input4 " /&
2.float:left
说明：元素向左浮动。
2.1 代码变更
input2 添加：float:left
div-b 添加：float:left
div-d&添加：float:left
2.2 变更后视图
　　① 浏览器的宽度&不够长&时
　　② 浏览器的宽度"够长"时
当前元素分类(float:left)
下一个紧邻元素分类(不含float)
块级元素(a)
块级元素(b)
b会填充a遗留下来的空间，a会和b发生重叠，a的图层在上面。
内联元素(b)
b会紧跟在a的后面。并根据自身内联元素的特点，是否换行。
内联元素(a)
块级元素(b)
b不会跟随a的移动。
内联元素(b)
b会紧跟在a的后面。并根据自身内联元素的特点，是否换行。
3.float:right
说明：元素向右浮动。
3.1 代码变更
input2元素：添加 float:right
div-b 添加：float:right
div-d&添加：float:right
3.2 变更后视图
　　① 浏览器的宽度&不够长&时
　　② 浏览器的宽度"够长"时
当前元素分类(float:right)
下一个紧邻元素分类(不包含float)
块级元素(a)
块级元素(b)
b会填充a遗留下来的空间，若a会和b发生重叠(父容器宽度减少)，a的图层在上面。
内联元素(b)
b会填充a遗留下来的空间。
内联元素(a)
块级元素(b)
b不会跟随a的移动。
内联元素(b)
b会填充a遗留下来的空间。
4. 相邻元素含有float属性&
因内联元素的特性，最好别把内联元素与块级元素相邻使用float属性。
下面都以块级元素为例：
默认视图：
4.1 float:left
　　　　给这三个div都添加 float:left
4.1.1 视图
　　　　①浏览器的宽度"足够长"
　　　　②浏览器的宽度"不够长"
4.1.2 结论
　　　　Ⅰ 相邻的浮动元素，left属性最前面的元素，排在最左面。
　　　　Ⅱ 成为浮动元素后，在浮动层拥有内联元素的"特性"，当多个浮动元素1排容不下时，就换行。
4.2 float:right
　　　　给这三个div都添加 float:right
4.2.1 视图
　　　　①浏览器的宽度"足够长"
　　　　②浏览器的宽度"不够长"
&4.2.2 结论
　　　　Ⅰ 相邻的浮动元素，right属性最前面的元素，排在最右面。
　　　　Ⅱ 成为浮动元素后，在浮动层拥有内联元素的"特性"，当多个浮动元素1排容不下时，就换行。
4.3 height高度不等的块级元素
把div-a的height值设为大于div-b，三个div都添加 float:left后：
4.3.1 视图
　　　　①浏览器的宽度"足够长"
　　　　②浏览器宽度缩小时
　　　　③浏览器宽度进一步缩小时
4.3.2 结论
　　　　Ⅰ height不相等的div浮动元素排序时，照拥有内联元素的"特性"，当多个浮动元素1排容不下时，就换行。
4.3.3 解决浏览器宽度缩小变形
　　　　把添加float的属性的div元素嵌入在一个div中，并给此div添加width和height属性。浏览器宽度缩小时，也不会发生变形。
　　　　可参照&
==================================系列文章==========================================
本篇文章：2.3 &CSS float 浮动属性
阅读(...) 评论()温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
阅读(1868)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'js div浮动效果',
blogAbstract:'方法一：&script type=\"text/javascript\"&&//&![CDATA[&&&&&&&&&&&&&&&&&&&&&& var theTop = 20/*这是默认高度,越大越往下*/;&&&&&&&&&&& var old = theT&&&&&&&&&&& function initFloatTips() {&&&&&&&&&&&&&&& tips = document.getElementById(\'floatTips\');&&&&&&&&&&&&&&& moveTips();',
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:8,
publishTime:4,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}