CSS让浮动和清空浮动更容易理解(图文皆有)
时间:2023-03-30 15:31:18
CSS
1.什么是浮动(floating)float属性定义了元素浮动的方向。float:left元素向左浮动。float:right元素向右浮动。浮动:无默认值。元素不会浮动,而是出现在它们在文本中出现的位置。float:inherit指定应从父元素继承float属性的值。看一段简单的代码:floatleft
floatright meow .child1{向左飘浮;高度:500px;宽度:70%;背景:#aa0;//黄色}.child2{浮动:正确;高度:300px;宽度:30%;background:#0aa;//green}.child3{background:#a0a;//purple}二、什么是明确的?clear属性指定段落的左侧或右侧不允许有浮动元素。clear:left不允许左侧的浮动元素。clear:right不允许右侧的浮动元素。clear:both不允许左右两侧的浮动元素。清除:无默认值。允许浮动元素出现在两侧。clear:inherit指定clear属性的值应该从父元素继承。比如上面的例子,我们加上clear:both;到child3以清除浮动。(child3的左右两边不允许浮动元素,自然也就不会跟着两个浮动元素的屁股了~)那么,只允许一侧浮动是什么感觉呢?原来是紫色的:
child1向右漂浮