1.前言CSSclearboth清除产生浮动,使用cssfloatfloating会产生css浮动,这个时候需要清除浮动,只需使用clearstyle属性即可实现。2.清晰的语法和结构1.清晰的语法clear:none|左|右|both2.clear参数值说明属性说明None允许两边有浮动物体bot不允许有浮动物体left不允许有浮动物体在左边rightdoesnotallow右边有浮动物体3.clear解释值该属性的表示不允许漂浮物体的边缘情况。物体左侧不允许漂浮物,右侧不允许漂浮物,漂浮物不允许漂浮物。4.css结构div{clear:left}div{clear:right}div{clear:both}3.divclear最常见的用法是使用clear:both清除浮动。比如一个大对象中有两个小对象使用cssfloat样式避免浮动,导致大对象的背景或边框无法正确显示。这时候需要clear:both来清除浮动。四、案例一、案例描述设置一个css宽度(csswidth)为500px;box(div),cssborder(cssborder)转红色,cssbackground(cssbackground)转黑色,csspadding转10pxbox,里面包裹了2个小盒子,一个css向右浮动(float:right),一个cssfloat向左(float:left),两者的边框都是白色的,背景颜色是灰色的,宽度是200px,css高度和css高度都是150px。这样,我们就可以观察case的效果,看到浮动生成,使用clear清除浮动。CSS代码:.divcss5{宽度:500px;背景:#000;边框:1px实心#F00;填充:10px}.divcss5_left,.divcss5_right{边框:1pxsolid#FFF;背景:#999;宽度:200px;height:150px}/*csscomment:在这里,对于屏幕截图,包裹css代码*/.divcss5_left{float:left}/*csscomment:设置浮动到左边*/.divcss5_right{float:right}/*css注释:设置向右浮动*/html代码片段:
