浮动在CSS中的运用

最新推荐文章于 2024-05-12 22:02:08 发布

绿皮车的忧伤

最新推荐文章于 2024-05-12 22:02:08 发布

阅读量149

点赞数

文章标签： css 前端 html5

本文链接：https://blog.csdn.net/greentrainsad/article/details/127432533

版权

1.浮动简介

网页的布局方式非常多：有在文档流中元素默认的布局方式，还有margin，浮动，定位，弹性盒子，网格布局·····，今天我们就来说说浮动。

浮动：设置元素浮动，可以让元素脱离文档流，从而不具有元素在文档流中特点，

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

设置元素浮动：float

可选值：none 默认值

left 向左浮动

right 向右浮动

2.浮动特点1

设置元素浮动后的特点：

1、元素脱离文档流，元素一旦脱离文档流，就不会占据原来在文档流中的位置，

其下面的元素会立即跑上去。

2、元素浮动之后，不会超过它前一个兄弟，最多一边齐

3、如果前一个兄弟没有浮动，下面浮动的元素，也不会跑到前面

4、设置元素浮动后，元素也是尽量的向左或者向右进行浮动

5、浮动元素不会超过其父元素的范围

 <div id="box">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
    </div>

现在大盒子里面有三个小盒子，我们来给这几个盒子设置一下样式，然后希望在水平方向并排排列

怎么做呢？代码如下：

#box {
        width: 500px;
        height: 600px;
        background-color: #ccc;
        margin: 0 auto;
      }
      #box>div{
        width: 100px;
        height: 100px;
        background-color: red;
     
      }
      
      #box>.box1{
        float: left;
      }
      #box>.box2{
        width: 150px;
        height: 150px;
        background-color: green;
        float: left;
      }
      #box>.box3{
        background-color: yellow;
        float: left;
      }

效果：

有一点我们要注意一下： margin可以调整元素的位置，但大的位置调整最好不用，常用于小的位置间距调整

总结：浮动目前来讲它的主要作用就是让页面中的元素可以水平排列

通过浮动可以制作一些水平方向的布局

3.浮动特点2

当浮动的元素碰到文字，浮动的元素不会盖住文字，而文字会环绕浮动的元素，产生文字环绕元素的效果，这也是浮动最早的效果

<div id="box">
      <div class="box1"></div>
      <p class="p1">
        者活有间韩斗谓先今德恶，舟九和，子郭章国极的非花郭不，否宫的娘生第白廿对其头羊，为即甲总保你心能和觉程上胜临韩，变感清应说人为，十尤陛救千烦才秦然两九不事应太苦败答，此洪道胜怒，洪谓五以斯作秦，花败纯破不足，弟我久锐到使姑己不死有到感有考中措时，的是只接。
        韩样统感牙范币否自了，骨讨到灰面，爱卑易，帝此娘沾全他死，帝日满与留罪，衣惜到太落千不撒，么活上己韩一一人者官准只尘特，准同王尽统航王仃活无，能快死生天洋磊，专处耳非的诗得五安谋兮里制联交，同领之会变最杀的逃别他我她才，判兼哥也当商法说身司弟搏切皮六瞠骨。
      </p>
    </div>

例子：这有一个盒子和一段文字，现在我们设置样式以后看最终的结果是不是和我们总结的一样

#box{
        width: 500px;
        height: 500px;
        background-color: #ccc;
      }
      .box1{
        width: 100px;
        height: 100px;
        background-color: rgba(255,0, 0,.2);
        float: left;
      }

果然，浮动的盒子没有吧文字覆盖住，而是文字环绕图片

总结：浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，

所以我们可以通过浮动来设置文字环绕图片的效果

4.实战-用浮动写导航条

浮动讲完了，我就给大家讲一个浮动在实战中的运用，浮动在导航中的运用非常广泛，我写了一个demo，接下来用代码展示，大家要想掌握好这一块的知识，可以把代码认真看看，最好自己再多敲敲。

<!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>w3导航条</title>
    <style>
      *{
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
      }
      .nav{
        width: 1210px;
        height: 48px;
        line-height: 48px;
        background-color: rgb(232, 231, 227);
        margin: 100px auto;
      }
      .nav>li{
        float: left;
        width: 14.28%;
        text-align: center;
      }
      a{
        color: rgb(119, 119, 119);
        display: block;
      }
      /* 第二种写法 */
      a:hover{
        background-color: #3f3f3f;
        color: white;
      }
      /*第一种写法 */
      /* li:hover{
        background-color: #3f3f3f;
      }
      li:hover>a{
        color: white;
      } */
    </style>
  </head>
  <body>
    <ul class="nav">
      <li>
        <a href="#">HTML/CSS</a>
      </li>
      <li>
        <a href="#">Browser Side</a>
      </li>
      <li>
        <a href="#">Server Side</a>
      </li>
      <li>
        <a href="#">programming</a>
      </li>
      <li>
        <a href="#">xml</a>
      </li>
      <li>
        <a href="#">web building</a>
      </li>
      <li class="h">
        <a href="#">reference</a>
      </li>
    </ul>
  </body>
</html>

好啦，今天的分享到这边就结束了，我往期的文章都是对HTML和CSS的讲解，要想自学这块或者刚入这一行的朋友有什么不明白的可以相互学习，交流，希望大家收获多多。