CSS浮动

作者: 瑟闻风倾 | 来源:发表于2019-09-23 10:02 被阅读0次

一篇文章带你了解CSS clear both清除浮动
CSS浮动
css定位
CSS 定位
CSS 定位 (Positioning)
Test10
CSS定位
CSS盒子模型、定位、浮动
CSS clear both清除浮动
CSS之float,文档流,position详解

float属性的值：

left：元素向左浮动
right：元素向右浮动
none：元素不浮动
inherit：从父级继承的浮动属性

备注：clear属性可去掉浮动属性。clear的属性值：

left：去掉元素向左浮动
right：去掉元素向右浮动
both：左右两侧均去掉不浮动
inherit：从父级继承来clear的值

1. 示例

(1) eg1
float.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <link href="style_float.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
</html>

style_float.css

#div1{
    width: 100px;
    height: 100px;
    background-color: red;
}
#div2{
    width: 100px;
    height: 100px;
    background-color: blue;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: green;
}

效果1.png
(2) eg2
float.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <link href="style_float.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
</html>

style_float.css

#div1{
    width: 100px;
    height: 100px;
    background-color: red;
    float: left;
}
#div2{
    width: 150px;
    height: 100px;
    background-color: blue;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: green;
}

备注：红色元素向左浮动。红色遮挡了蓝色，相当于绝对布局，红色脱离了页面，不占有页面位置。

效果2-1.png

style_float.css

#div1{
    width: 100px;
    height: 100px;
    background-color: red;
    float: right;
}
#div2{
    width: 150px;
    height: 100px;
    background-color: blue;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: green;
}

备注：红色元素向右浮动。

效果2-2.png
style_float.css

#div1{
    width: 100px;
    height: 100px;
    background-color: red;
    float: left;
}
#div2{
    width: 150px;
    height: 100px;
    background-color: blue;
    float: left;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: green;
    float: left;
}

备注：所有元素向左浮动。

效果2-3.png

(3) eg3
float.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <link href="style_float.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div id="div">
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
    </div>
</body>
</html>

style_float.css

#div1{
    width: 100px;
    height: 100px;
    background-color: red;
    float: left;
}
#div2{
    width: 150px;
    height: 100px;
    background-color: blue;
    float: left;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: green;
    float: left;
}
#div{
    width: 400px;
    height: 500px;
    background-color: darkgray;
}

备注：主容器宽度可以承载所有内容。

效果3-1.png
style_float.css

#div1{
    width: 100px;
    height: 100px;
    background-color: red;
    float: left;
}
#div2{
    width: 150px;
    height: 100px;
    background-color: blue;
    float: left;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: green;
    float: left;
}
#div{
    width: 300px;
    height: 500px;
    background-color: darkgray;
}

备注：主容器宽度未能承载所有内容。

效果3-2.png
style_float.css

#div1{
    width: 100px;
    height: 150px;
    background-color: red;
    float: left;
}
#div2{
    width: 150px;
    height: 100px;
    background-color: blue;
    float: left;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: green;
    float: left;
}
#div{
    width: 300px;
    height: 500px;
    background-color: darkgray;
}

效果3-3.png
(4) eg4
备注：文本继承了父级的浮动属性。
float.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <link href="style_float.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div id="div">
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
        Hello
    </div>
</body>
</html>

style_float.css

#div1{
    width: 100px;
    height: 150px;
    background-color: red;
    float: left;
}
#div2{
    width: 150px;
    height: 100px;
    background-color: blue;
    float: left;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: green;
    float: left;
}
#div{
    width: 300px;
    height: 500px;
    background-color: darkgray;
}

效果4-1.png

float.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <link href="style_float.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div id="div">
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
        Hello World
    </div>
</body>
</html>

效果4-2.png

float.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <link href="style_float.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div id="div">
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
        HelloWorld!
    </div>
</body>
</html>

效果4-3.png
(5) eg5
备注：去掉继承于父级的浮动属性。
float.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <link href="style_float.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div id="div">
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
        <div id="text">HelloWorld!</div>
    </div>
</body>
</html>

style_float.css

#div1{
    width: 100px;
    height: 150px;
    background-color: red;
    float: left;
}
#div2{
    width: 150px;
    height: 100px;
    background-color: blue;
    float: left;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: green;
    float: left;
}
#div{
    width: 300px;
    height: 500px;
    background-color: darkgray;
}
#text{
    clear: left;
}

效果5.png

2. float应用-float属性实现瀑布流布局效果

float_practice.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float属性实现瀑布流布局效果</title>
    <link href="style_float.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div id="mydiv">
        <ul>
            <li><img src="../img/1.jpg"></li>
            <li><img src="../img/2.PNG"></li>
            <li><img src="../img/3.PNG"></li>
        </ul>
        <ul>
            <li><img src="../img/4.PNG"></li>
            <li><img src="../img/5.PNG"></li>
            <li><img src="../img/6.PNG"></li>
        </ul>
        <ul>
            <li><img src="../img/7.PNG"></li>
            <li><img src="../img/8.PNG"></li>
            <li><img src="../img/9.PNG"></li>
        </ul>
    </div>
</body>
</html>

style_float.css

/*通配符选择器*：所有的标签或元素*/
*{
    margin: 0px;
    padding: 0px;
}
#mydiv{
    width: 950px;
    height: auto;
    margin: 20px auto;
}
ul{
    width: 250px;
    float: left;
}
li{
    list-style: none;
}
img{
    width: 200px;
    height: 200px;
}

通配符选择器*：所有的标签或元素
auto ：自适应

瀑布流效果布局.png