css:浮动的学习及使用

时光带不走

已于 2022-08-09 16:06:18 修改

阅读量443

点赞数 1

文章标签： css 学习 servlet

于 2022-08-08 17:01:13 首次发布

本文链接：https://blog.csdn.net/cj1555640/article/details/126231145

版权

一.浮动简介

块元素在文档流会独占一行，自上而下排列

如果设置元素浮动，元素脱离文档流后，就不会具有在文档流中的特点

float: ; 设置元素的浮动

可选值：

none 默认值，元素正常显示，不浮动

left 元素向左浮动

right 元素向右浮动

float可以使块元素水平布局

设置float浮动特点

1、设置元素浮动之后，元素会脱离文档流，元素原来在文档流中的位置，就不会存在下面的元素就会上移，挤上去

2、设置元素浮动之后，元素会尽量的向左或者向右，向上进行移动，而且默认情况下，不会脱离父元素的范围

二.浮动的特点

设置float浮动特点:第一类特点

1、设置元素浮动之后，元素会脱离文档流，元素原来在文档流中的位置，就不会存在下面的元素就会上移，挤上去

2、设置元素浮动之后，元素会尽量的向左或者向右，向上进行移动，而且默认情况下，不会脱离父元素的范围

3、设置浮动的元素，不会超过它前一个兄弟，最多一遍齐

4、如果浮动元素的前一个兄弟，没有浮动，则浮动的元素不会超过他前面没有浮动的元素

总结：浮动主要是用于元素的水平布局

浮动的第二类特点

当浮动元素遇到了文字，浮动的元素不会覆盖文字，而是文字会环绕在浮动元素的周围从而实现文字环绕图片的效果。

这也是浮动最早的功能，只是后面用于水平布局。

浮动的第三类特点

元素在文档流当中

块元素：独占一行

行内元素：不会独占一行，不能自定义设置宽高

行内块元素：兼具块元素，行内元素的特点

元素脱离文档流了，就不再区分块，行内，行内块，也就不具有以上的特点

元素也不会独占一行了，也可以设置宽高了等等

2.下拉框的使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            list-style: none;
            /* margin: 0;
            padding: 0; */
            float: left;
            margin-left: 20px;
            width: 160px;
            height: 50px;
        }
        a:not(.a1){
            text-decoration: none;
            font-size: 22px;
            color: white;
        }
        li:first-of-type{
            margin-left: 300px;
        }
        #zong{
            height: 50px;
            line-height: 50px;
            font-size: 20px;
            background-color:rgb(0,208,212) ;
            /* background-image: linear-gradient(to right,,rgb(155,254,165)); */
        }

        .xlk{
            /* color: rgb(97,97,97); */
            display: none;
            width: 250px;
            height: 70px;
            border: 1px solid 0,188,212;
        }
        .a1{
            color:  rgb(97,97,97);
            text-decoration: none;
        }
        li:hover .xlk{
            display: block;
            
        }
    </style>
</head>

<body>
    <div id="zong">
        <ul>
            <li>
                <a href="#">首页</a>
            </li>

            <li>
                <a href="#">机票</a>
                <div class="xlk">
                    <a href="#" class="a1">机票首页</a>
                    <a href="#" class="a1">低价机票</a>
                </div>
            </li>

            <li>
                <a href="#">酒店</a>
                <!-- <div class="xlk">
                    <a href="#" class="a1">机票首页</a>
                    <a href="#" class="a1">低价机票</a>
                </div> -->
            </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>

结果: