CSS之--------浮动

CSS浮动

标准文档流
标准文档流的特性：
(1)空白折叠现象：
无论多少个空格，最后显示出来的页面都只会折叠成一个空格
(2)高矮不齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>
    块级元素
    <a href="https:\\www.baidu.com">百度一下</a>
    <span>span标签</span>
    <img src="../Image/QQ背景.jpg" alt="">
    <img src="../Image/QQ背景.gif" alt="">
    <p>你好啊</p>

</h1>
</body>
</html>

在这里插入图片描述
　
　哈哈哈看起来特别丑是吧
　(3)自动换行，一行写不满，自动换行；
　2. 块级元素和行内元素
　(1)块级元素：div p form ul li ol dl address fieldset hr menu table
　(2)行内元素：span strong em br img input label select textarea cite
　(3)区别：
　　块级元素会独占一行，其宽度自动填满其父元素宽度；
　　行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到同一行排不下，才会换行，其宽度随元素的内容而变化；
　　块级元素即使设置了宽度，那么它还是独占一行的；
　　块级元素可以设置margin和padding。行内元素的水平方向有效，竖直方向无效
　　下面我们举个例子看一下行内元素和块级元素的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            background: #ff7956;
        }
        span{
            background: gold;
        }
    </style>
</head>
<body>
<h1>你好啊1</h1>
<h1>你好啊2</h1>
<span>你好啊3</span>
<span>你好啊4</span>
</body>
</html>

可以看出，块级标签占据一整行，而行内标签是紧挨着的
在这里插入图片描述
下面我们尝试给块级元素和行内元素设置宽和高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            background: #ff7956;
            height: 50px;
            width: 500px;
        }
        span{
            background: gold;
            height: 500px;
            width: 50px;
        }
    </style>
</head>
<body>
<h1>你好啊1</h1>
<h1>你好啊2</h1>
<span>你好啊3</span>
<span>你好啊4</span>
</body>
</html>

可以看出，宽和高的设置只对块级元素有效，对行内元素无效。
在这里插入图片描述
　3. display属性，我们给h1标签的display属性赋值 inline也就是行内的意思，那么它就会变成行内元素，不能独占一行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            display: inline;/*行内元素*/
            background: #ff7956;
            height: 50px;
            width: 500px;
        }
        span{
            background: gold;
            height: 500px;
            width: 50px;
        }
    </style>
</head>
<body>
<h1>你好啊1</h1>
<h1>你好啊2</h1>
<span>你好啊3</span>
<span>你好啊4</span>
</body>
</html>

在这里插入图片描述
我们如果将span的display属性的值设置成block，那么它就变成了块级元素，可以独占一行

　４.float属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #a {
            background: gold;
            float: left;
            height: 300px;
            width: 300px;
        }
        #b{
            background: green;
            float: left;
            height: 300px;
            width: 300px;
        }
    </style>
</head>
<body>
<span id="a">你好啊3</span>
<span id="b">你好啊4</span>
</body>
</html>

５.float的属性值：
　left：元素向左浮动；
　right：元素向右浮动；
　none：元素不浮动，并会显示在其文本中出现的位置；
在这里插入图片描述
　６.overfollow属性
　属性值：
　vosible：内容不会修剪，呈现在盒子之外；
　hidden：内容被修剪，其余内容不可以被看见；
　scroll：内容会修剪，但是浏览器会显示滚动条来查看其余内容；
　auto：如果内容被修剪，那么浏览器会显示滚动条一遍查看其余内容；
hidden属性值演示效果：
在这里插入图片描述
auto属性值显示效果：

visible属性值演示效果：

scroll属性值演示效果：

7. 解决父级边框塌陷的方法：
　(1)浮动元素后面加空div（会造成代码冗余）
　(2)设置父元素的高度（降低延展性）
　(3)父级添加overflow属性（下拉列表框的场景不能用）
　(4)父级添加伪类after（推荐使用，没有副作用）
8. inline-block与float的区别：
display：inline-block
　(1)可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
　(2)位置方向不可控制，会解析空格
　(3)IE 6、IE 7上不支持
float：
　(1)可以让元素排在一行并且支持宽度和高度，可以决定排列方向；
　(2)float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式；

CSS浮动

猜你喜欢