网页基础教程(九)--CSS浮动

  • 编辑时间: 2014-05-23 10:32:00
  • 浏览量: loading...
  • 作者: 段亮

可能有些新手(小白)们不清楚什么是浮动,以及怎么才是清楚浮动。在CSS
   有三种基本的定位机制:普通流、浮动和定位,上一节教程中,我们一起学习什么是定位,在这节教程中,我们一起学习什么是浮动,以及谈谈我对于浮动的理解。

在CSS浮动中,大家常见的左浮动(float:left)和右浮动(float:right),我们就以左浮动为案列,来跟大家一起讲解下:

左浮动:float:left 如下图:

 


以及浮动中出现的一常见些情况:如图

 



注:在第一图中说明了一个情况,当3个盒子,同时向左浮动,会被挤下来。(因为3个盒子的总宽度,超过了最外层的盒子的宽度,才会成此情况。

注:在第二图中说明一个情况,如果不是3个盒子的高度一样,同时向左进行浮动,就会产生以下情况。

清除浮动

好了,说了这多浮动案列,那么我也跟大家举一个没清除浮动的案列。如下图:


从此图上看,我的所有文字都向左浮动,而我的输入框,所在的盒子,我并没有给浮动,所以也会依次的向左跟紧。如想正常排序,须清除浮动。

清除浮动:代码style="clear:both"

总结:很多人网页布局发生错位,因为一般情况下是没有清除浮动,所以用了浮动后,一定要清除浮动,切记!

阿里云服务器优惠

写文章不易,如果您觉得文章对你有帮助。
打赏激励下作者吧,谢谢支持! ~(@^_^@)~!

微信打赏 微信打赏

支付宝打赏 支付宝打赏

你也想建立一个独立博客?

你是否也想打造一个在互联网上的个人品牌,成为一个家喻户晓的人物呢?
请点击了解 怎样创建个人博客

站长推荐
loading... 数据加载中...

超低服务器价格,值得购买!

超低服务器价格,值得购买!