CSS（十三）——CSS Overflow和Float(浮动）

最新推荐文章于 2024-08-23 08:37:33 发布

神秘的博主

最新推荐文章于 2024-08-23 08:37:33 发布

阅读量774

点赞数 25

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_62701594/article/details/140737369

版权

CSS 布局 - Overflow

CSS overflow 属性用于控制内容溢出元素框时显示的方式。

CSS Overflow

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

overflow属性有以下值：

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

当设置 overflow 为 scroll 时，无论内容是否溢出，浏览器都会为该元素显示滚动条

当设置 overflow 为 auto 时，浏览器会根据内容是否溢出自动决定是否显示滚动条。

注意:overflow 属性只工作于指定高度的块元素上。

注意: 在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 "overflow:scroll" 也是一样的)。

用法示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            background-color: #eee;
            width: 200px;
            height: 50px;
            border: 1px dotted black;
            overflow: visible;
        }
    </style>
</head>

<body>
    <div>
        <p>111</p>
        <p>111</p>
        <p>111</p>
    </div>
</body>

</html>

运行结果：

其他四个用法一样，不过实现的效果不一样，大家按照自己的需求选择

CSS Float(浮动)

什么是 CSS Float（浮动）？

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

彼此相邻的浮动元素

把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

清除浮动 - 使用 clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

这样主要用来保证指定元素在原来的方位，比如文字不会因为周围元素的浮动而被改变位置等等

CSS 中所有的浮动属性

属性	描述	值
clear	指定不允许元素周围有浮动元素。	left right both none inherit
float	指定一个盒子（元素）是否可以浮动。	left right none inherit