【重学前端】CSS 浮动 float

最新推荐文章于 2023-12-21 20:06:30 发布

时小浅

最新推荐文章于 2023-12-21 20:06:30 发布

阅读量350

点赞数

分类专栏：重学前端文章标签： css3

本文链接：https://blog.csdn.net/qq_36194388/article/details/118957989

版权

重学前端专栏收录该内容

43 篇文章 1 订阅

订阅专栏

本文详细介绍了CSS float属性的用法，包括设置浮动、清除浮动、overflow和display属性的应用实例，以及如何通过空div、overflow属性或伪元素来管理浮动带来的影响。适合理解浮动布局并提升网页设计技巧。

摘要由CSDN通过智能技术生成

概念

float是css样式中的定位属性，用于设置标签对象（如：<div>标签盒子、<p>标签、<li>标签等html标签）的浮动布局，浮动也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。

浮动的框可以向左或向右移动，直到它的外边缘碰到父级盒子（父容器）或另一个浮动框（子元素）的边框为止。

只要设置了浮动，就将盒子脱离了文本流。由于浮动框不在文本流中，所以文本流中的其它元素，表现出就像浮动框不存在一样，自动上移，占有浮动框的位置

应用

浮动属性 float

作用：该属性的值指出了对象是否及如何浮动。

语法： float :none| left|right

示例：

/*左浮动和右浮动*/
div { float:left; }
div { float:right; }

注：

只要设置了浮动，盒子将脱离普通文本流，下方的内容会自动上移。解决的办法是：使用clear属性清除浮动带来的效果。

清除浮动

作用：清除浮动造成的影响。

语法： clear :none| left|right| both

示例：

div { clear:left; } /* 清除左浮动 */
div { clear:both; } /* 清除左右浮动 */

超出 overflow

作用：检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

语法： overflow :visible| auto| hidden| scroll

示例：

div { overflow: hidden; } /* 超出部分隐藏 */

显示与隐藏 display

作用：设置或检索对象是否及如何显示。

语法： display : block| none|inline

示例：

a { display: block; } /* 以块的方式显示A标签 */
div { display: none; } /* 不显示DIV标签 */
div { display: inline; } /* 以行内元素的方式显示DIV标签 */

通常用于制作滑动门等多种网页特效。

浮动的实例

未浮动的效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>float属性</title>
<style type="text/css">
html,body{background:#ff9;}
div{margin:10px;border:1px dashed #333;background:#90baff;padding:12px;}
p{border:1px dashed #333;background:#ff90ba;}
</style>
</head>
<body>
<div class="box1">Box-1</div>
<div class="box2">Box-2</div>
<div class="box3">Box-3</div>
<p>这里是浮动的外围文字，这里是浮动的外围文字，这里是浮动的外围文字，这里是浮动的外围文字，这里是浮动的外围文字，这里是浮动的外围文字，这里是浮动的外围文字，这里是浮动的外围文字</p>
</body>
</html>