【说站】css浮动元素的规则介绍
2023-06-13 09:13:16 时间
css浮动元素的规则介绍
说明
1、当浮动元素浮动时,其margin不会超过包含块的padding。
如果想要超过元素,可以设置margin属性。
如果两个元素一个向左浮动,另一个向右浮动,左浮动元素的marginRight不会与右浮动元素的marginLeft相邻。
2、若有多个浮动元素,浮动元素将按顺序排列而不重叠。
后面的元素高度不会超过前面的元素,也不会超过包含块。
3、如果非浮动元素和浮动元素同时存在,非浮动元素在前面。
浮动元素不会高于非浮动元素。浮动元素会尽可能对齐顶部、左右。
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.one {
width: 100px;
height: 100px;
background: red;
}
.two {
width: 100px;
height: 100px;
background: green;
float: left;
}
.three {
width: 150px;
height: 150px;
background: blue;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
以上就是css浮动元素的规则介绍,希望对大家有所帮助。更多css学习指路:css教程
本文教程操作环境:windows7系统、css3版,DELL G3电脑。
收藏 | 0点赞 | 0打赏
相关文章
- Java中的命名规则
- Apache中 RewriteRule 规则参数介绍
- CSS @media 规则
- css opacity属性_CSS中的opacity属性[通俗易懂]
- 在html中加入外部css样式,如何引入CSS样式表?
- 积分商城2022年12月最新规则通知
- 【MySQL】说透锁机制(二)行锁 加锁规则 之 范围查询(你知道会锁表吗?)
- SpringCloudGateway手动编写路由规则对请求进行转发
- 前端必备的 CSS 库,normalize.css
- 【CSS教程】紫色渐变登陆布局html+css代码
- The Shapes of CSS(css的形状)详解编程语言
- 苹果可能被迫遵守英国新的数字竞争规则 否则将面临罚款
- 属性Oracle的CSS属性:让你的网站更出彩(oracle的css)
- 掌握MySQL字符排序规则,提升数据库操作效率(mysql字符排序规则)
- 改变海战规则 俄罗斯最新核潜艇测试
- Linux用户名命名规则及实践(linux用户名规则)
- 介绍下 BFC 布局规则,除此之外,你还知道哪些 CSS 格式化上下文?
- CSS与MySQL合力提升网页性能(css与mysql结合)
- 快手小店调整延迟发货管理规则 赔付形式由现金变更为无门槛现金券
- CSS规则层叠时的优先级算法