CSS demo:flaot & clear float

简介:              1,首先,我们布局基本的div块:         如下代码所示,我们在body里面写3几个基本div块,然后设置一些基本属性:         效果图:              2,加入基本浮动...

     

       1,首先,我们布局基本的div块:


        如下代码所示,我们在body里面写3几个基本div块,然后设置一些基本属性:



 


      效果图:

   


     

   2,加入基本浮动

       

现在我们想让红色div放到绿色div右边,我们在两个div中加入浮动


    



效果图:


   3,添加一个处于标准流的div

   




    

效果图:




添加了一个处于标准流的div中,可以很明显的看出一种float的效果,红块div和绿块div像云一样漂浮在橘黄色div上面,这个效果很贴切的符合float这个词。

 

但是可以明显的看出,浮动会带来一个遮盖的不良效果,然而在真正的网页设计中,我们却并不需要这种遮盖的效果。

 


接下来演示如何清除浮动:

 



4,首先我们将红块右移动



   

效果图:






5,现在我想让大块不被覆盖

 

清除橘黄色块的左浮动:




效果:




6,为了能更清楚看清浮动的影响,现在,我们,改变下大小:将红色div的高度加长,并将橘黄色div长度清除




效果:





7,接着我们为黄色div清除右浮动,然后将绿色div加长:






效果:


 可以看出黄色div的上边紧贴着红色div的下边,但是因为绿色div加长,又有一个遮盖的效果:






8,为了既能清除左浮动,又能清除右浮动,I'll take both;





效果如下:



目录
相关文章
|
前端开发
css改input变输入框光标颜色demo效果示例(整理)
css改input变输入框光标颜色demo效果示例(整理)
|
7月前
|
前端开发 容器
CSS基础-浮动:float与清除浮动
【6月更文挑战第9天】本文介绍了CSS中的`float`属性,用于创建多列布局和图文混排,但会导致浮动塌陷和元素重叠问题。为解决这些问题,文章探讨了`clear`属性的四种清除浮动方法,包括`clear`属性、空元素、伪元素和`overflow`方法。随着Flexbox和Grid布局的兴起,它们在某些场景下替代了浮动,但理解浮动原理仍是布局基础。掌握浮动和清除浮动技巧对构建稳定布局至关重要。
87 5
|
3月前
|
前端开发
CSS3:hover&demo
本文介绍了CSS中`hover`伪类的基本用法,包括改变元素自身样式、影响子元素及相邻或后续兄弟元素样式的技巧。同时,还探讨了`:before`和`:after`伪元素的使用方法,以及如何通过CSS实现边框流动效果、创建登录页面、设计轮盘游戏界面和平滑处理文本溢出等实用案例。每个示例都配有代码块,便于理解和实践。
|
4月前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果,包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
70 0
|
6月前
|
编解码 前端开发 C++
CSS【详解】布局 display ( 含 flex 布局,grid 布局,table 布局,float 布局,响应式布局 等)
CSS【详解】布局 display ( 含 flex 布局,grid 布局,table 布局,float 布局,响应式布局 等)
176 0
|
6月前
|
前端开发
css display position float 之间的关系
css display position float 之间的关系
38 0
|
8月前
|
前端开发
CSS float(浮动)
CSS float(浮动)
67 2
|
前端开发
CSS布局讲解-float浮动布局使用
CSS布局讲解-float浮动布局使用
101 0
|
前端开发
css设置数组最后2个没有下边框效果(demo)整理
css设置数组最后2个没有下边框效果(demo)整理
|
前端开发
css三角号旋转90度,上下移动动画效果demo效果(整理)
css三角号旋转90度,上下移动动画效果demo效果(整理)

热门文章

最新文章