【说站】css中浮动如何理解
CSS 如何 理解 浮动
2023-06-13 09:13:17 时间
css中浮动如何理解
本教程操作环境:windows7系统、CSS3、Dell G3电脑。
说明
1、浮动主要分为左浮动和右浮动,分别为float: left; float: right。
2、每次浮动后,元素本身都脱离文档流,原来的位置被其他元素占据。
如果目标元素在同一父元素中占据浮动位置。
3、对于浮动元素有一个要求,必须有一个宽度。
对于内联元素,会考虑浮动元素的边界,因此会围绕着浮动元素。
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动元素2</title>
<!-- float:float属性会尽可能远的向左或向右浮动一个元素,然后它下面的内容会绕流这个元素(
所谓绕流,就是像流体一样绕着这个元素流动)
1.对于浮动元素都有一个要求,必须有一个宽度
2.对于内联元素,会考虑浮动元素的边界,因此会围绕着浮动元素
-->
<style type="text/css">
html,body{
margin: 0;
padding: 0;
}
#normal {
width: 100%;
background-color: blue;
}
#amazing {
width: 200px;
background-color: red;
float: right;
}
</style>
</head>
<body>
<div>
<p id="normal">
<span>我是sapn1</span>
<span>我是sapn1</span>
<span>我是sapn1</span>
</p>
<p id="amazing">
<span>我是sapn3</span>
<span>我是sapn4</span>
<span>我是sapn5</span>
</p>
<span style="background-color: #00FFFF;">我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素</span>
<span style="background-color: #00FFFF;">我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素</span>
<span style="background-color: #00FFFF;">我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素</span>
<span style="background-color: #00FFFF;">我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素</span>
<span style="background-color: #00FFFF;">我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素</span>
<span style="background-color: #00FFFF;">我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素</span>
<span style="background-color: #00FFFF;">我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素</span>
<span style="background-color: #00FFFF;">我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素</span>
<span style="background-color: #00FFFF;">我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素</span>
<span style="background-color: #00FFFF;">我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素</span>
<span style="background-color: #00FFFF;">我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素</span>
<span style="background-color: #00FFFF;">我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素</span>
<span style="background-color: #00FFFF;">我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素</span>
<span style="background-color: #00FFFF;">我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素</span>
<span style="background-color: #00FFFF;">我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素</span>
<span style="background-color: #00FFFF;">我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素</span>
<span style="background-color: #00FFFF;">我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素我是内联元素内联元素</span>
</div>
</body>
</html>
以上就是css中浮动的理解,希望对大家有所帮助。更多css学习指路:css教程
收藏 | 0点赞 | 0打赏
相关文章
- HTML如何加背景图片_css设置背景图片
- CSS书写顺序
- css怎么改鼠标样式,如何利用CSS改变鼠标的样式
- css鼠标点击的五种状态
- 在html中加入外部css样式,如何引入CSS样式表?
- 如何使用CSS伪类选择器
- 【说站】css普通兄弟选择器如何理解
- 前端(二)-CSS
- css怎么隐藏滚动条「建议收藏」
- 2022 最受欢迎的 CSS 变量、属性、函数以及颜色分别是什么
- 页面布局(下):引入 Tailwind CSS 框架构建博客应用 UI 界面
- Nginx access日志过滤css,jpg,js等日志记录
- CSS 中的变量
- 如何使用CSS创建高级动画,这个函数必须掌握
- CSS 如何设置背景透明,并使用 PHP 将十六进制的颜色值转换成 RGBA 格式
- css如何制作八边形详解编程语言
- The Shapes of CSS(css的形状)详解编程语言
- CSS 表格样式
- CSS与MySQL合力提升网页性能(css与mysql结合)
- 器使用Oracle CSS服务器提升业务效率(oracle css服务)
- CSS的expression使用简介
- 教你如何用CSS来控制网页字体的显示样式
- 一个新的CSS菜单代码
- 发现四种在网页中使用CSS样式表的方法
- CSS清除浮动常用方法小结
- 在IE与FF中如何居中的css写法
- 简单的加密css地址防止别人下载你的CSS文件的方法
- juqery学习之六CSS--css、位置、宽高