CSS 浮动元素

回头科科

已于 2022-04-21 15:50:48 修改

阅读量941

点赞数

分类专栏： CSS 文章标签： CSS

于 2022-04-21 13:00:17 首次发布

本文链接：https://blog.youkuaiyun.com/jcf52/article/details/124318844

版权

CSS 专栏收录该内容

7 篇文章

订阅专栏

一.clear clear属性规定元素的哪一侧不允许其他浮动元素。

二.清除浮动

三.overflow溢出属性

float 属性定义元素在哪个方向浮动。. 以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。

在 CSS 中，任何元素都可以浮动。
浮动元素会生成一个块级框，而不论它本身是何种元素。
关于浮动的两个特点：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

三种取值

left：向左浮动
right：向右浮动
none：默认值，不浮动

一.clear clear属性规定元素的哪一侧不允许其他浮动元素。

值	描述
left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在左右两侧均不允许浮动元素
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值

注意：clear属性只会对自身起作用，而不会影响其他元素。

二.清除浮动

清除浮动的副作用（父标签塌陷问题）
主要有三种方式：

固定高度
伪元素清除法
overflow:hidden

伪元素清除法（使用较多）：

clearfix:after {
 content: "";
display: block;
 clear: both;
 }

三.overflow溢出属性

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

overflow（水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向）

例子：圆形头像示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>头像</title>
    <style>
        #i1{
            overflow: visible;
            border: 5px;
            border-color: #0f0f0f;
            border-style: solid;
            border-radius: 50%;
            
        }
    </style>
</head>
<body>
<img src="https://img0.baidu.com/it/u
=325674188,3280397254&fm=253&fmt=auto&app=1
38&f=JPEG?w=501&h=500" alt="" id="i1" height="100px" width="100px">

</body>
</html>