• CSS基础7-浮动float


    没有浮动的情况下

    两个div是上下的

    <div class="test"></div>
    <div class="test"></div>
    
    *{
                margin: 0;
                padding: 0;
            }
    
            .test{
                height: 100px;
                 100px;
                background-color: red;
            }

     加了浮动

    .test{
                height: 100px;
                 100px;
                background-color: red;
                float: left;
            }

    父元素,且都没有浮动时

    继承父元素左浮动

    <div class="per">
            <div class="test">1</div>
            <div class="test">2</div>
        </div>
    
    
    .test{
                height: 100px;
                 100px;
                background-color: red;
                /*float: left;*/
                float: inherit;
            }
    
            .per{
                height:300px;
                 300px;
                background-color: blue; 
                float: left;
            }

    继承父元素右浮动

    注意元素位置,后面的在前面了

    文本环绕

    1、浮动会使元素变成块级元素

    2、浮动会使元素脱离正常位置

     没有浮动,宽高就是内容大小

    .span{
                height: 100px;
                 100px;
                background-color: red;
            }

    加了左浮动

    加了右浮动

    看来还是不会覆盖的

     浮动是在父元素内部浮动的

    <div class="per2">
            <span class="span">span</span>
        </div>
    
    
    .span{
                height: 100px;
                 100px;
                background-color: red;
                float: right;
            }
    
            .per2{
                 300px;
                height: 300px;
                border: 1px solid black;
            }

    如果父元素也右浮动

    文字环绕

    因为浮动了,直接添加文字可以环绕了

     浮动的影响

    父元素无法检测子元素高度,导致塌陷

    没有浮动之前

    父元素没有高度,只有宽度和颜色子元素的高度会把父元素撑开。

    <div class="per3">
            <div class="test3"></div>
            <div class="test3"></div>
            <div class="test3"></div>
            <div class="test3"></div>
        </div>
    
    .per3{
                 400px;
                background-color: blue;
                border: 1px solid black;
            }
    
            .test3{
                 50px;
                height: 50px;
                background-color: red;
                border: 1px solid black;
            }

    子元素加了左浮动

    父元素没法检测到子元素高度,坍塌了

    float: left;

    在父元素下面加一个元素,直接加在了坍塌的父元素下面了

    <div class="per3">
            <div class="test3"></div>
            <div class="test3"></div>
            <div class="test3"></div>
            <div class="test3"></div>
        </div>
    
        <div class="per4">
    
    
    .per4{
                 400px;
                height: 100px;
                background-color: green;
            }

    1、给父元素加高度,治标不治本。如果后续多了几个浮动子元素,又会继续崩

    2、clear

    如果一个元素浮动,就会脱离正常文档流。那后面的元素如果不浮动。就会被覆盖

    正常情况

    .blue{
                height: 100px;
                 100px;
                background-color: blue;
                /*//float: left;*/
            }
    
            .red{
                height: 200px;
                 200px;
                background-color: red;
                
            }
    
    
    
    <div class="blue"></div>
        <div class="red"></div>

    前面的元素有浮动,会影响后面的元素。blue左浮动

    后面的元素浮动,不会影响前面的元素

    给红色加上clear,不允许左边有浮动元素

    .red{
                height: 200px;
                 200px;
                background-color: red;
                clear: left;
            }

    又ok了

    overflow,处理溢出元素,是对溢出的那个部分的操作

    只要父元素加上overflow:hidden,清楚了浮动,就由子元素撑开了

    文档流(普通流)

    浮动流

    clear:both没用

    4、给父元素也添加浮动

     

    父元素的内容正确了。

    但是就像之前一样,前面的浮动会对后面造成影响,后面的绿块被档住了

    .per3{
                 400px;
                background-color: blue;
                border: 1px solid black;
                float: left;
            }
    
            .test3{
                 50px;
                height: 50px;
                float: left;
                background-color: red;
                border: 1px solid black;
            }
    
            .per4{
                 400px;
                height: 100px;
                background-color: green;
            }

    给后面的绿块加上清除前面的浮动即可

    .per4{
                 400px;
                height: 100px;
                background-color: green;
                clear: both;
            }

    元素位置

    <div class="per3">
            <div class="test3"></div>
            <div class="test3"></div>
            <div class="test3"></div>
            <div class="test3"></div>
        </div>
    
        <div class="per4">

    浮动案例

    这些列表全是浮动

    一个例子

    鼠标移上去会上浮

    1、浮动即可,就能全部排在一排了。

    2、给元素添加hover事件。

    <div class="nav">
            <div class="image">假装是图片</div>
            <div class="nav-li"><a href="">前端岗</a></div>
            <div class="nav-li"><a href="">后端岗</a></div>
            <div class="nav-li"><a href="">算法岗</a></div>
            <div class="nav-li"><a href="">测试岗</a></div>
            <div class="nav-li"><a href="">产品岗</a></div>
    </div>
    .image{
                 100px;
                height: 50px;
                background-color: black;
                color: white;
                text-align: center;
                line-height: 50px;
                /*都是浮动元素,不会覆盖,因为它们都在浮动流里面了*/
                float: left;
            }
    
            .nav-li{
                height: 50px;
                 100px;
                border: 1px solid black;
                text-align: center;
                line-height: 50px;
                float: left;
            }
            .nav-li:hover{
                line-height: 0px;
            }
  • 相关阅读:
    SQL 获取本年第几周
    SQL Server 数据类型
    (转)经典SQL查询语句大全
    mssql查询某个值存在某个表里的哪个字段的值里面
    SQL Server 数据库还原
    SQL Server 数据库备份
    【转】T-SQL 教程
    【原】C# decimal字符串转成整数
    Django基础篇(二)与mysql配合使用
    Django基础篇(一)
  • 原文地址:https://www.cnblogs.com/weizhibin1996/p/9361146.html
Copyright © 2020-2023  润新知