带你熟悉CSS浮动

一、概念理解

  浮动:顾名思义先浮后动,浮动的对象会先漂浮起来,离开自己原来的位置(也就是所谓的脱离文档流),后动的意思是,它的后面的元素会向它原来的位置动起来。

二、注意事项

  1.当元素有浮动属性时,会对其父元素或后面的元素产生影响,会出现一个布局错乱的现象。(我们可以通过清除浮动的方式进行解决这个问题)

  2.当父元素没有指定高度并且子元素有浮动时,这个父元素的高度不会自动增加。

  3.清除浮动:就是可以去掉前面对象的浮动对后面对象的印象,是加给未浮动元素的。

    语法:clear:none(默认值,允许两边都可以有浮动) both(左右两侧都不允许有浮动) left(左侧不允许有浮动) right(右侧不允许有浮动)。

    清除浮动方法总结:

      [1].额外标签法:W3C建议在父元素的末尾增加一个css为”clear:both”的元素,强迫容器适应它的高度以便装下所有浮动的元素。(缺点是会增加代码)。

      [2].父元素使用overflow的方法:通过设置父元素的overflow的属性为hidden,是最简单的清除浮动的方法,但是如果子元素使用定位布局,将很难实现。

      [3].利用伪对象after方法:定义一个类,使用伪对象after

控制浮动元素的影响,网上最流行的清除浮动的代码:

        .clearFix{clear:both;display:block

 ;visibility:hidden;height:0;line-height:0;contect:””;} (.clearFix{zoom:1;}解决IE6/7兼容性问题)。

  4.另外一种解决浮动布局错乱问题的方式:给浮动元素的父元素加宽度。

三、使用方式

  我们可以直接定义好浮动的CSS,然后应用给指定的需要浮动的元素就好了,方式非常简单易用。比如:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>浮动测试</title>
 5         <style type="text/css">
 6             .right{float:right;background-color:Red;height:150px;width:150px;border-radius:50%;margin-top:50px;margin-right:20px;}
 7             .left{float:left;background-color:Blue;height:150px;width:150px;border-radius:50%;margin-top:50px;margin-left:20px;}
 8         </style>
 9     </head>
10 <body>
11     <div class="right"></div>
12     <div class="left"></div>
13 </body>
14 </html>

运行效果如下:

就是这么简单,有什么不懂得可以加我QQ:1281616040细聊。。。。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏练小习的专栏

闭合浮动元素

按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列。因此当其高度超出包含容器时,一般父容器不...

1956
来自专栏前端说吧

Vue-组件嵌套之——父组件向子组件传值

4399
来自专栏极乐技术社区

wxss学习系列《一》定位(position),布局(Layout)

定位(position) 2017的微信公开课pro如期进行了,小程序将于2017年1月9日对个人开放,公司项目的demo版做了个大概,过程中花的时间最多的还是...

31310
来自专栏游戏杂谈

HTML5的data-* 要注意的问题

首先第一个问题,比较简单,直接使用dom.dataset,如果“===”undefined则不支持

1412
来自专栏极乐技术社区

微信小程序入门《二》实例:条件渲染、数据遍历、网络请求、获取本地图片

实例内容 条件渲染 数据遍历 网络请求 获取本地图片 实例一: 条件渲染 如果motto为Hello World,则输出你好世界,否则原样输出。 这里是分支条件...

3059
来自专栏前端下午茶

CSS margin合并问题

在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折...

2833
来自专栏小狼的世界

Firefox与IE的一些Javascript编程小技巧

说明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elemen...

1092
来自专栏拂晓风起

Flash:DisplayObject的矩阵旋转(移动/修改注册点,修改旋转点)

1142
来自专栏从零开始学自动化测试

appium+python自动化30-list定位(find_elements)

前言 有时候页面上没有id属性,并且其它的属性不唯一,平常用的比较多的是单数(element)的定位方法,遇到元素属性不唯一,就无法直接定位到了。 于是我们可...

4827
来自专栏前端说吧

两列布局——但只用右浮动

3015

扫码关注云+社区

领取腾讯云代金券