带你熟悉CSS浮动
2024-08-27 09:07:50
一、概念理解
浮动:顾名思义先浮后动,浮动的对象会先漂浮起来,离开自己原来的位置(也就是所谓的脱离文档流),后动的意思是,它的后面的元素会向它原来的位置动起来。
二、注意事项
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,然后应用给指定的需要浮动的元素就好了,方式非常简单易用。比如:
<!DOCTYPE html>
<html>
<head>
<title>浮动测试</title>
<style type="text/css">
.right{float:right;background-color:Red;height:150px;width:150px;border-radius:50%;margin-top:50px;margin-right:20px;}
.left{float:left;background-color:Blue;height:150px;width:150px;border-radius:50%;margin-top:50px;margin-left:20px;}
</style>
</head>
<body>
<div class="right"></div>
<div class="left"></div>
</body>
</html>
运行效果如下:
就是这么简单,有什么不懂得可以加我QQ:1281616040细聊。。。。
最新文章
- 从0到1---“保多多”APP的开发(一)
- linux查看磁盘io的几种方法
- Java web 之表单验证
- Lua面向对象编程
- BZOJ4012 [HNOI2015]开店
- Bootstrap页面布局6 - BS把已有的固定宽度布局转换成响应式布局
- Wordpress更换编辑器
- 驱动开发 - WDK 调试及 SVN 环境搭建
- hdu4111 Alice and Bob
- Python os与sys模块解析
- PHPCMS v9 自定义表单添加验证码
- 【Alpha版本】冲刺阶段 - Day2 - 漂流
- Python 3.3.2 round函数并非";四舍五入";
- forms-隐藏处理
- 洛谷3705 [SDOI2017] 新生舞会 【01分数规划】【KM算法】
- 890. Find and Replace Pattern找出匹配形式的单词
- Win10系列:UWP界面布局进阶7
- laravel 查询指定字段的值
- 2.12 单选框和复选框(radiobox、checkbox)
- 20155326 2016-2017-2《Java程序设计》课程总结
热门文章
- <;a>;标签跳转传值。
- VC++6.0MFC运行的简单流程
- hdu.1430.魔板(bfs + 康托展开)
- 如何编译Apache Hadoop2.6.0源代码
- 第一天 django
- HDU 5074 Hatsune Miku(2014鞍山赛区现场赛E题)
- CSU 1328 近似回文词(2013湖南省程序设计竞赛A题)
- BZOJ2229—— [Zjoi2011]最小割
- GNU KHATA——开源的会计管理软件
- js之DOM和事件