一、浮动产生原因
浮动是因为使用了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解决浮动,清除浮动方法
以这个左右布局为例:
return (
<div className="App">
<div className='Header'></div>
<div className='main'>
<div className='leftSidebar'></div>
<div className='rightSidebar'>
<ul>
<li style={bgcolor[0]}></li>
<li style={bgcolor[1]}></li>
<li style={bgcolor[2]}></li>
<li style={bgcolor[3]}></li>
<li style={bgcolor[4]}></li>
<li style={bgcolor[5]}></li>
</ul>
</div>
</div>
</div>
);
页面效果:
我们可以看到高度只有60px;这是由于右边彩虹块浮动的原因
方法一:添加新的元素 、应用 clear:both;
在浮动的盒子之下再放一个标签,在这个标签中使用clear:both,来清除浮动对页面的影响.
return (
<div className="App">
<div className='Header'></div>
<div className='main'>
<div className='leftSidebar'></div>
<div className='rightSidebar'>
<ul>
<li style={bgcolor[0]}></li>
<li style={bgcolor[1]}></li>
<li style={bgcolor[2]}></li>
<li style={bgcolor[3]}></li>
<li style={bgcolor[4]}></li>
<li style={bgcolor[5]}></li>
</ul>
</div>
<div className="clearfloat"></div>
</div>
</div>
);
.clearfloat{
clear: both;
}
方法二:父级div定义 overflow: auto(注意:是父级div也就是这里的 main)
.main{
overflow: auto;
}
方法三: 使用伪元素来清除浮动(:after,注意:作用于浮动元素的父亲)
.clearfix:after{
content:"";/*设置内容为空*/
height:0;/*高度为0*/
line-height:0;/*行高为0*/
display:block;/*将文本转为块级元素*/
visibility:hidden;/*将元素隐藏*/
clear:both;/*清除浮动*/
}
方法四:使用双伪元素清除浮动
.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}
我们来看看使用之后的效果
可以明显看到已经有了高度。