浮动及其简单布局

最新推荐文章于 2024-09-14 17:04:32 发布

嘿！真的。

最新推荐文章于 2024-09-14 17:04:32 发布

阅读量70

点赞数

文章标签： css html 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_59207203/article/details/129325820

版权

一、浮动

1、浮动概念：是一种布局方式，可以让元素脱离文档流，一旦元素脱离文档流

就不再具有元素在文档流中的特点，从而帮助我们布局

2、设置浮动：float样式名

可选值：

none 不浮动默认值

left 向左浮动

right 向右浮动

3、浮动的特点

（1）、基本特点

a:一旦元素设置了浮动，元素就会脱离文档流，

它原来在文档流中位置，就没有了，后面的元素就会跑上去，顶上

b:元素设置浮动，会尽可能的向页面的左上或者右上进行浮动

c:浮动的元素不会超出它的父元素

d:浮动的元素不会超过它上一个兄弟元素，最多一边齐

e：如果浮动的元素上一个兄弟元素没有浮动，浮动元素也不会跑上去

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
    /* 布局方式：元素在文档流中，浮动，定位，弹性盒子，····· */
    /* 1、浮动概念：是一种布局方式，可以让元素脱离文档流，一旦元素脱离文档流
    就不再具有元素在文档流中的特点，从而帮助我们布局
      2、设置浮动：float样式名  
        可选值：
          none  不浮动  默认值
          left  向左浮动
          right  向右浮动
      3、浮动的特点
         （1）、基本特点
           a:一旦元素设置了浮动，元素就会脱离文档流，
           它原来在文档流中位置，就没有了，后面的元素就会跑上去，顶上
           b:元素设置浮动，会尽可能的向页面的左上或者右上进行浮动
           c:浮动的元素不会超出它的父元素
           d:浮动的元素不会超过它上一个兄弟元素，最多一边齐
           e：如果浮动的元素上一个兄弟元素没有浮动，浮动元素也不会跑上去
    */

      #box {
        width: 500px;
        height: 600px;
        background-color: #ccc;
        margin: 50px auto;
      }
      .box4{
        width: 100px;
        height: 100px;
        background-color: aqua;
        /* float: none; */
        /* display: inline-block; */
      }
      .box1{
        background-color: red;
        float: left;

      }
      .box2{
        background-color: green;
        width: 150px;
        height: 150px;
        float: left;
      }

    </style>
  </head>
  <body>
    <div id="box">
      <div class="box1 box4"></div>
      <div class="box2 box4"></div>
      <div class="box3 box4"></div>
    </div>
  </body>
</html>

浮动的特点（2）特殊点：

当浮动元素元素碰到了文字，浮动元素不会盖住文字，而文字会环绕在浮动元素

周边。从而出现一种文字环绕图片的效果，这也是浮动最早的一个作用

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      #box{
        width: 400px;
        height: 400px;
        border: 1px solid green;
      }
      .box1{
        width: 100px;
        height: 100px;
        background-color: rgba(255, 0, 0,.3);
        float: left;
      }
      /* 浮动的特点
      （2）特殊点
      当浮动元素元素碰到了文字，浮动元素不会盖住文字，而文字会环绕在浮动元素
      周边。从而出现一种文字环绕图片的效果，这也是浮动最早的一个作用
      */
    </style>
  </head>
  <body>
    <div id="box">
      <div class="box1"></div>
      <p class="p1">
        者活有间韩斗谓先今德恶，舟九和，子郭章国极的非花郭不，否宫的娘生第白廿对其头羊，为即甲总保你心能和觉程上胜临韩，变感清应说人为，十尤陛救千烦才秦然两九不事应太苦败答，此洪道胜怒，洪谓五以斯作秦，花败纯破不足，弟我久锐到使姑己不死有到感有考中措时，的是只接。
        韩样统感牙范币否自了，骨讨到灰面，爱卑易，帝此娘沾全他死，帝日满与留罪，衣惜到太落千不撒，么活上己韩一一人者官准只尘特，准同王尽统航王仃活无，能快死生天洋磊，专处耳非的诗得五安谋兮里制联交，同领之会变最杀的逃别他我她才，判兼哥也当商法说身司弟搏切皮六瞠骨。
      </p>
    </div>
  </body>
</html>

当元素设置浮动以后，会完全脱离文档流，元素的一些特点也会发生改变

脱离文档流的特点

块元素：

1:块元素不再独占页面的一行

2:块元素的宽高默认被内容撑开，如果设置，就按设置

行内元素：

1:浮动过后的行内元素更像行内块元素,默认宽度为内容的宽度，可以设置宽高

行内块元素：

也没有图片三像素的问题

总结：当元素设置浮动以后,脱离文档流，就不需要再区分块和行内，行内块