css clear属性(cssclear什么意思)
大家好,今天小编来为大家解答以下的问题,关于css clear属性,cssclear什么意思这个很多人还不知道,现在让我们一起来看看吧!
css的属性有哪些
希望能帮到你属性名称
字体属性(Font)
font-family
font-style
font-variant
font-weight
font-size
颜色和背景属性
Color
Background-color
Background-image
Background-repeat
Background-attachment
Background-position
文本属性
Word-spacing
Letter-spacing
Text-decoration
Vertical-align
Text-transform
Text-align
Text-indent
Line-height
边距属性
Margin-top
Margin-right
Margin-bottom
Margin-left
填充距属性
Padding-top
Padding-right
Padding-bottom
Padding-left
边框属性
Border-top-width
Border-right-width
Border-bottom-width
Border-left-width
Border-width
Border-color
Border-style
Border-top
Border-right
Border-bottom
Border-left
Width
Height
Float
Clear
分级属性
Display
White-space
List-style-type
List-style-image
List-style-position
List-style
鼠标(Cursor)属性属性含义
使用什么字体
字体是否斜体
是否用小体大写
字体的粗细
字体的大小
定义前景色
定义背景色
定义背景图案
重复方式
设置滚动
初始位置
单词之间的间距
字母之间的间距
文字的装饰样式
垂直方向的位置
文本转换
对齐方式
首行的缩进方式
文本的行高
顶端边距
右侧边距
底端边距
左侧边距
顶端填充距
右侧填充距
底端填充距
左侧填充距
顶端边框宽度
右侧边框宽度
底端边框宽度
左侧边框宽度
一次定义宽度
设置边框颜色
设置边框样式
一次定义顶端
一次定义右侧
一次定义底端
一次定义左侧
定义宽度属性
定义高度属性
文字环绕
哪一边环绕
定义是否显示
怎样处理空白
加项目编号
加图案
第二行起始位置
一次定义列表
自动
定位“十”字
默认指针
手形
移动
箭头朝右方
箭头朝右上方
箭头朝左上方
箭头朝上方
箭头朝右下方
箭头朝左下方
箭头朝下方
箭头朝左方
文本“I”形
等待
帮助
属性值
所有的字体
Normal、italic、oblique
Normal、small-caps
Normal、bold、bolder、lithter等
Absolute-size、relative-size、length、percentage等
颜色
颜色
路径
Repeat-x、repeat-y、no-repeat
Scroll、Fixed
Percentage、length、top、left、
right、bottom等
Normal<length>
同上
None|underline|overline|line-
through|blink
Baseline|sub|super|top|text-top|middle|bottom|text-bottom|
Capitalize|uppercase|
lowercase|none
Left|right|center|justify
<length>|<percentage>
Normal|<number>|<length>|
<percentage>
Length|percentage|auto
同上
同上
同上
Length|percentage
同上
同上
同上
Thin|medium|thick|length
同上
同上
同上
同上
Color
None|dotted|dash|solid等
Border-top-width|color等
同上
同上
同上
Length|percentage|auto
Length|auto
Left|right|none
Left|right|none|both
Block、inline、list-item、none
Normal、pre、nowrap
Disc、circle、square等
<url>|none
Inside、outside
<keyword>|<position>|<url>
Auto
Crosshair
Default
Hand
Move
e-resize
Ne-resize
Nw-resize
n-resize
Se-resize
Sw-resize
s-resize
w-resize
Text
Wait
Help
Css 用br标签清除浮动的问题。
四种清除浮动方法如下:
1、使用空标签清除浮动。
我用了很久的一种方法,空标签可以是div标签,也可以是p标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动,并为其定义css代码:clear:both。此方法的弊端在于增加了无意义的结构元素。
对于使用额外标签清除浮动(闭合浮动元素),是w3c推荐的做法。至于使用
元素还是空
可以根据自己的喜好来选(当然你也可以使用其它块级元素)。不过要注意的是,
本身是有表现的,它会多出一个换行出来,所以要设定它的heigh为0,以隐藏它的表现。所以大多数情况下使用空
比较合适。
<!–
*{margin:0;padding:0;}
body{font:36px
bold;
color:#f00;
text-align:center;}
#layout{background:#ff9;}
#left{float:left;width:20%;height:200px;background:#ddd;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#ddd;line-height:80px;}
.clear{clear:both;}
–>
left
right
2、使用overflow属性。
此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义css属性:overflow:auto,即可!也可以用overflow:hidden;”zoom:1″用于兼容ie6,也可以用width:100%。
不过使用overflow的时候,可能会对页面表现带来影响,而且这种影响是不确定的,你最好是能在多个浏览器上测试你的页面;
<!–
*{margin:0;padding:0;}
body{font:36px
bold;
color:#f00;
text-align:center;}
#layout{background:#ff9;overflow:auto;zoom:1;
}
/*
overflow:auto可以换成overflow:hidden,zoom:1可以换成width:100%*/
#left{float:left;width:20%;height:200px;background:#ddd;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#ddd;line-height:80px;}
–>
left
right
3、使用after伪对象清除浮动。
该方法只适用于非ie浏览器
。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0,否则该元素会比实际高出若干像素;二、content属性是必须的,但其值可以为空,蓝色理想讨论该方法的时候content属性的值设为”.”,但我发现为空亦是可以的。
<!–
*{margin:0;padding:0;}
body{font:36px
bold;
color:#f00;
text-align:center;}
#layout{background:#ff9;}
#layout:after{display:block;clear:both;content:”";visibility:hidden;height:0;}
#left{float:left;width:20%;height:200px;background:#ddd;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#ddd;line-height:80px;}
–>
left
right
4、浮动外部元素,float-in-float。这种方法很简单,就是把“#outer”元素也进行浮动(向左或者向右)。
但是这种方法带来的别外一个问题就是和“#outer”相邻的下一个元素会受到“#outer”的影响位置会产生变化,所以使用这种方法一定要小心。有选择把页面中的所有元素都浮动起来,最后使用一个适当的有意义的元素(比如页脚)进行清理浮动,这有助于减少不必要的标记,但是过多的浮动会增加布局的难度。
<!–
*{margin:0;padding:0;}
body{font:36px
bold;
color:#f00;
text-align:center;}
#layout{background:#ff9;float:left;}
#left{float:left;width:20%;height:200px;background:#ddd;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#ddd;line-height:80px;}
–>
left
right
css中清除浮动的方法有哪些
css清除浮动可以理解为打破横向排列。清除浮动的关键字是clear,官方定义如下:
语法:
clear: none| left| right| both
取值:
none:默认值。允许两边都可以有浮动对象
left:不允许左边有浮动对象
right:不允许右边有浮动对象
both:不允许有浮动对象
根据上边的基础,假如页面中只有两个元素div1、div2,它们都是左浮动,场景如下:
此时div1、div2都浮动,根据规则,div2会跟随在div1后边,但仍然希望div2能排列在div1下边,就像div1没有浮动,div2左浮动那样。这时候就要用到清除浮动(clear)
对于CSS的清除浮动(clear),一定要牢记:这个规则只能影响使用清除的元素本身,不能影响其他元素。
具体做法:
要想让div2下移,就必须在div2的CSS样式中使用浮动。本例中div2的左边有浮动元素div1,因此只要在div2的CSS样式中使用clear:left;来指定div2元素左边不允许出现浮动元素,这样div2就被迫下移一行。
OK,本文到此结束,希望对大家有所帮助。