css之浮动案例。

远方0905

已于 2022-09-26 14:30:29 修改

阅读量1.3k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： html5+css 文章标签： css

于 2019-11-01 13:39:28 首次发布

本文链接：https://blog.csdn.net/qq_43198727/article/details/102848022

html5+css 专栏收录该内容

21 篇文章

订阅专栏

浮动
浮动可以实现让多个元素排在同一行，并且给这些元素设置宽度与高度！浮动可以让元素脱离标准文档流就可以实现让多个元素排在同一行，并且可以设置宽高
浮动:他是通过一个(float)浮动属性来实现 float left 向左浮动向左移动 float right 向右移动
浮动元素的特性
1.浮动元素它可以脱离标准文档流他不再占用空间了
2.我们可以把浮动元素理解为 “漂”浮动元素他的层级要比标准文档流里面的元素层级要高，它们会将标准文档流中的元素给压盖住
3.浮动元素他会向左或者向右移动。
4.浮动元素他遇到了父元素的边框就停止了浮动,浮动元素他还会遇到上一个浮动元素就停止了浮动浮动元素浮动以后其父元素不会再包裹着浮动元素
5.我们将行内元素进行浮动以后那么这个行内元素它就会变成块级元素。

浮动案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮动案例之网站导航栏</title>
    <style type="text/css">
        /*在css代码的第一步:都是清楚HTML标签的默认的内填充与外边距*/
        *{
            margin:0;
            padding: 0; 
        }
        body{
            background-image:url(../images/jz.png)
        }
        .nav{
            width:960px;
            height: 40px;
            margin-right: auto;
            margin-left: auto;
        }
        .nav ul{
            list-style:none; /*将列表前面的项目符号去除*/
        }
        .nav ul li{
            float: left;  /*把每一个li标签进行向左浮动。*/
            background-image:url(..images/jz.png) ;
            /*给每一个li标签设置一个宽度*/
            width: 120px;
            text-align:center/*将文本进行居中*/ 
        }
        a{
            text-decoration: none;
            color:cornsilk;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a</li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
        </ul>
    </div>
</body>
</html>

做出来的效果，图是我自己搜了，意思对了。

浮动的缺点

只要有浮动，那么就必须有清除浮动
因为
因为经过浮动了元素，它会影响到它下面的元素的排版布局，还有浮动元素的父元素没有将浮动元素包裹着
只要清除了浮动，不会影响到浮动元素的下面进行排版布局浮动元素的父元素会将浮动元素从视觉上包裹着
1、给浮动元素的父元素设置一个固定的高度, 这个方法不建议用因为一个元素的高度一般情况下，不是手动设置的他应该是由自身的内容撑高的。
他的源代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .box{
            width: 600px;
            border: 1px solid #000;
            margin-left: auto;
            margin-right: auto;
            /*给浮动元素的父元素设置一个固定的高度。*/
            height: 400px;
        }
        .box div{
            width: 100px;
            height: 100px;
        }
        .div1{
            background-color: #f00;
            float: left;
        }.div2{
            background-color: #0f0;
            float: left;
        }.div3{
            background-color: #0000ff;
            float: right;
    </style>
</head>
<body>
    <div class="box">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>
    <h2>清除浮动</h2>
</body>
</html>

第一种设置固定高度来清除浮动
2、使用清楚浮动的样式属性 clear 这个属性是专用于来清除浮动的这个属性有三个值 clear:left;清除左浮动，
clear:right;清除有浮动 clear both;两者都清除。
如何用呢?
这个属性一般是用在最后，一个浮动元素的下面在最后一个浮动元素的下面新建一个空白的div 这个div什么都不要放不要给这个div 里面放置内容
他只做一件事情就是清除浮动。
源代码如下

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .box{
            width: 600px;
            border: 1px solid #000;
            margin-left: auto;
            margin-right: auto;
            /*给浮动元素的父元素设置一个固定的高度。*/
        }
        .div1{
            width: 100px;
            height: 100px;
            background-color: #f00;
            float: left;
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: #0f0;
            float: left;
        }
        .div3{
            width: 100px;
            height: 100px;
            background-color: #0000ff;
            float: right;
        }
        .clear{
            clear: both;/*两者都清除*/
        }
    </style>
</head>
<body>
     <div class="box">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
        <div class="clear"></div>
    </div>
    <h2>清除浮动</h2>
</body>
</html>

清除后的效果