CSS浮动包括哪些特性,哪些问题要注意的
Admin 2022-07-30 群英技术资讯 1117 次浏览
这篇文章主要讲解了“CSS浮动包括哪些特性,哪些问题要注意的”,文中的讲解内容简单、清晰、详细,对大家学习或是工作可能会有一定的帮助,希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。
说明
1、浮动元素会从普通文档流中分离出来。
但浮动元素不仅会影响自己,还会影响周围元素的对齐。
2、无论是行内元素还是块级元素,如果设置了浮动,浮动元素就会产生块级框。
可以设置width和height,所以float通常用来制作横向配列的菜单,可以设置大小和横向排列。
3、浮动元素之间的外边距不会折叠。
浮动元素不会重叠。定位元素不同,可能会重叠。
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动之特</title>
<style>
*{
padding: 0;
margin: 0;
}
.one,
.two {
width:200px;
height:200px;
background-color: pink;
}
.one{
float:left;
}
.two{
background-color: purple;
float:left;
}
.three{
float:left;
width:200px;
height:200px;
background-color: blue;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
本文教程操作环境:windows7系统、css3版,DELL G3电脑。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
本文用示例介绍CSS进行九宫格布局的方法。 朋友圈、微博等很多社交平台都是使用九宫格布局来展示图片的,九宫格布局也是前端面试经常会问的问题。
本篇文章给大家带来了关于css的相关知识,其中主要介绍了关于设置元素高度和宽度属性的相关问题,height和width属性用于设置元素的高度和宽度,height和width属性不包括内边距、边框或外边距。下面一起来看一下,希望对大家有帮助。
css3怎么样做三栏布局?在CSS中想要实现三栏布局有很多方法,这篇文章就给大家分享一下简单容易上手的方法,也就是用css3弹性盒子flexl来实现三栏布局,那么具体怎样做呢?下面我们来看一个示例。
本篇文章带大家了解一下CSS3 clip-path(裁剪路径),介绍一下如何利用 clip-path 实现动态区域裁剪,希望对大家有所帮助!
最近有这样一个需求就是如何读取或写入本地文件系统中的文件, html5来了它提供了一套文件系统的API,可以实现文件读写,本文就介绍了如何实现本地文件的读取和写入,感兴趣的可以了解一下
成为群英会员,开启智能安全云计算之旅
立即注册关注或联系群英网络
7x24小时售前:400-678-4567
7x24小时售后:0668-2555666
24小时QQ客服
群英微信公众号
CNNIC域名投诉举报处理平台
服务电话:010-58813000
服务邮箱:service@cnnic.cn
投诉与建议:0668-2555555
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 ICP核准(ICP备案)粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008