1.浮动的标签：脱离文档流的标签元素；
2.css的float属性和position属性都可以让标签元素浮动起来；
3.示例：
float示例一：
具有float属性的标签脱离文档流，其原本的位置被紧接着的元素占有
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>xxx</title>
<style type="text/css">
.boxLeft {
width: 400px;
height: 400px;
background: red;
float: left;
}
.boxRight {
width: 400px;
height: 400px;
background: green;
}
</style>
</head>
<body>
<div class="boxLeft"></div>
<div class="boxRight"><div>
</body>
</html>
float示例二：
子标签具有float属性，为防止子元素内容溢出，父元素添加overflow：auto
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>xxx</title>
<style type="text/css">
.boxParent {
width: 400px;
background: red;
overflow: auto;
zoom: 1;
}
img {
float: right;
}
</style>
</head>
<body>
<div class="boxParent">
<img src="http://www.learnlayout.com/images/ilta.png" />
</div>
</body>
</html>
float示例三：
避免紧接着的元素占用有float属性元素的原本位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>xxx</title>
<style type="text/css">
.boxLeft {
width: 400px;
height: 400px;
background: red;
float: left;
}
.boxRight {
width: 400px;
height: 400px;
background: green;
clear: left;
}
</style>
</head>
<body>
<div class="boxLeft"></div>
<div class="boxRight"><div>
</body>
</html>
position示例一：
position的relative相对于其原本应占有的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>xxx</title>
<style type="text/css">
.box {
width: 400px;
height: 400px;
background: red;
position: relative;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
position示例二：
position的absolute是相对于父元素的relative以上属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>xxx</title>
<style type="text/css">
.boxOutside {
width: 400px;
height: 400px;
background: red;
position: relative;
}
.boxInside {
width: 200px;
height: 200px;
background: green;
position: absolute;
bottom: 0px;
right: 0px;
}
</style>
</head>
<body>
<div class="boxOutside">
<div class="boxInside"><div>
</div>
</body>
</html>
position示例三：
position的fixed相对于浏览器的窗口
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>xxx</title>
<style type="text/css">
.box {
width: 400px;
height: 400px;
background: red;
position: fixed;
right: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
相关推荐
CSS 浮动属性 Float 详解 CSS 浮动属性 Float 是一种重要的定位属性，允许页面元素浮动在其他元素旁边。Float 属性可以取四个值：Left、Right、None 和 Inherit。其中，Left 和 Right 分别浮动元素到左边和右边，...
**一、CSS浮动** 浮动（Float）最初是为了实现图文混排而引入的，但现在已成为构建多列布局的基础。当一个元素被设置为浮动，它会脱离当前的正常流（normal flow），向左或向右移动，直到其边框碰到包含元素的边框...
CSS浮动是网页布局中一个重要的概念，主要用于创建多列布局。当一个元素被设置为浮动（float:left或float:right），它将从当前的流中移出，向左或向右移动，直到碰到边框或者另一个浮动元素。这个特性在早期网页设计...
内容概要：本文档全面讲解CSS浮动概念，浮动规则、实际应用及解决方案。详细讲述了通过使用float属性进行左右布局的基本方法，包括浮动的基础、浮动的常见规则以及在各种布局场合的应用示例，并着重解决了由浮动引发...
**CSS浮动详解** 浮动（Float）是CSS布局中一种古老但仍然重要的技术，它最初设计用于创建多列布局，如杂志或报纸的版面设计。浮动元素会从当前的正常文档流中移出，向左或向右移动，直到它们的边框接触到包含它们...
"JS QQ客服左侧或者右侧DIV+CSS浮动"是一个实现此类功能的解决方案，它能够让QQ客服窗口在页面的左侧或右侧保持固定，随着用户滚动页面而上下移动，始终保持在视线范围内。这种设计既不干扰用户浏览主要内容，又能...
CSS浮动float属性详解 在Web开发中，布局是非常重要的一方面，浮动float属性是CSS布局中非常关键的属性。通过对浮动float属性的理解和掌握，我们可以更好地实现网页的布局和排版。 Float浮动属性基本释义 float...
在本文中，我们将深入探讨与"CSS浮动布局"相关的知识点，通过一个名为“古诗欣赏”的练习Demo来学习和理解这一重要概念。这个Demo旨在帮助我们掌握如何利用CSS的浮动特性来实现美观的网页布局。 首先，让我们了解...
### CSS 浮动基础知识与常见问题解析 #### CSS 浮动概述 在CSS布局中，`float`属性是一个非常重要的概念，它允许元素脱离文档流并漂浮到一边，这样其他内容可以环绕在该元素周围。`float`属性主要用于创建多列布局...
**CSS浮动(float)属性详解** 在现代网页设计中，`DIV CSS`布局是构建响应式和灵活页面结构的关键。其中，CSS的`float`属性扮演着至关重要的角色，它允许元素在页面上浮动，以便创建复杂的布局和多列设计。在传统...
CSS浮动属性Float详解 CSS浮动属性Float是CSS中的一种定位方式，它可以使元素在网页流中浮动，周围的元素可以围绕它排列。浮动元素仍然是网页流的一部分，这与使用绝对定位的页面元素不同。绝对定位的页面元素被从...
本文将深入探讨CSS浮动，从基础理论到高级应用，旨在帮助读者全面理解这一关键特性。 首先，我们需要理解“浮动”的基本含义。在CSS中，浮动元素会离开其正常文档流，向左或向右移动，直到其边缘碰到包含框或另一个...
01css浮动.html
浮动f
浮动、绝对定位和相对定位是CSS中的关键概念，它们对于创建复杂的网页布局至关重要。本讲座将深入探讨这些概念，帮助您理解何时及如何有效地使用它们。 1. CSS 浮动（Float） 浮动最初是为了实现文本环绕图像而引入...
本文将深入探讨“CSS浮动元素”这一核心概念，以及它在网页布局中的应用。 浮动元素是CSS布局中的一个关键特性，它允许元素脱离其正常文档流，并向左或向右移动，直到其边缘碰到容器的边框或者另一个浮动元素。这个...
浮动练习