美文网首页HTML CSS
CSS入门八之浮动

CSS入门八之浮动

作者: 码农修行之路 | 来源:发表于2020-12-12 22:51 被阅读0次
浮动

:能够让多个元素排列在同一行 并且可以给这些元素设置宽高

  • 我们之前学过 行内元素可以让多个元素在同一行 块元素可以设置宽高

怎样让块元素具备行内元素的特点(多个元素放置在同一行) 那么只能让这些元素脱离标准的文档流

  • 浮动元素 float 其属性值:left right

浮动元素的特点:

  1. 脱离现有的标准的文档流 不占用空间
  2. 浮动的层级要比标准文档流中元素的层级高(在其它非浮动元素上面 覆盖其它元素)
  3. 浮动元素可以左右移动
  4. 浮动元素遇到父元素的边框边界停止浮动 box1 float:right; 会发现盒子一到body最右边边框位置停止
  5. 浮动元素遇到上一个附送元素也会停止浮动 box2 float:right; 发现盒子二移动到盒子一左边框的位置停止
  6. 浮动元素不包括在父元素里面 box3 float:right; 发现盒子三浮动后 body边框不能包含这几个盒子了
  7. 行内元素进行浮动后 就会变成块级元素 三个盒子设置浮动属性 这些元素就变成块级元素 可以在同一行
  8. 浮动元素 可以让块级元素设置宽高

一般浮动元素会影响整体的页面排版 怎样清除浮动 方法有三:

  1. 给浮动元素的父元素设置固定高度 可以清除浮动
  2. 在最后一个设置浮动属性的元素 下面添加一个空白div标签 并给这个空白标签设置 claer:both;(不能使用在列表里面 因为列表里面只能包含<li>标签)
  3. overflow:hidden 清除列表浮动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>浮动</title>
    <style type="text/css">
        .b {
            border: 1px solid #000;
        }
        .box1 {
            width: 100px;
            height: 100px;
            border: 2px solid #f00;
            float: left;
        }
        .box2 {
            width: 100px;
            height: 100px;
            border: 2px solid #0f0;
            margin-left: 20px;
            float: left;
        }
        .box3 {
            width: 100px;
            height: 100px;
            border: 2px solid #00f;
            float: left;
        }

        .box {
            /* 给浮动元素的父元素设置固定高度 可以清除浮动 */
            /*height: 120px;*/
            border: 1px solid #333;
        }
        .s1 {
            width: 100px;
            height: 100px;
            background-color: #444;
            border: 1px solid #aaa;
            float: left;
        }
        .s2 {
            width: 100px;
            height: 100px;
            background-color: #888;
            border: 1px solid #aaa;
            float: left;
        }
        .s3 {
            width: 100px;
            height: 100px;
            background-color: #bbb;
            border: 1px solid #aaa;
            float: right;
        }
        /* 使用标签 clear 来清除浮动 标签属性 left right both(常用) */
        .clear_float {
            clear: both;
        }

        ul {
            list-style: none;
        }

        ul li {
            float: left;
        }
    </style>
</head>
<body class="b">

     <!-- <div class="box1">盒子一</div>
     <div class="box2">盒子二</div>
     <div class="box3">盒子三</div> -->

     <div class="box">
        <span class="s1">块元素一</span>
        <span class="s2">块元素二</span>
        <span class="s3">块元素三</span>
        <!-- 在最后一个设置浮动属性的元素 下面添加一个空白div标签 并给这个空白标签设置 claer:both; 属性来清除浮动 -->
        <div class="clear_float"></div>
     </div>
     <div>测试盒子</div>

     <!-- overflow:hidden 清除列表浮动  -->

     <ul style="overflow: hidden;">
        <li>菜单选项一</li>
        <li>菜单选项二</li>
        <li>菜单选项三</li>
        <li>菜单选项四</li>
        <li>菜单选项五</li>
        <li>菜单选项六</li>
     </ul>

</body>
</html>

相关文章

  • CSS入门八之浮动

    浮动 :能够让多个元素排列在同一行 并且可以给这些元素设置宽高 我们之前学过 行内元素可以让多个元素在同一行 块元...

  • 一篇文章带你了解CSS clear both清除浮动

    一、前言 CSS clear both清除产生浮动 ,使用了css float浮动会产生css浮动,这个时候就需要...

  • 浮动和清除(闭合)浮动

    CSS之float and clear float 浮动和清除(闭合)浮动 目录 1.背景介绍 2.知识剖析 3....

  • CSS入门12-浮动与清除浮动

    (注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!)(注2:更多内容请查看我的目录。) ...

  • CSS布局之浮动

    学习前端有一段时间了,整理一下学习心得,顺便给初学者一些参考。(持续更新)如果有写的不对的地方,还望指教。 今天来...

  • CSS之——浮动、定位

    1. 文档流的概念指什么?有哪种方式可以让元素脱离文档流? 元素自上而下排列,将窗体自上而下分成一行行, 并在每行...

  • css之浮动清除

    浮动的清除 浮动的性质: 脱标 贴边 字围 收缩 给浮动的元素的祖先元素加高度(不常用)如果一个元素要浮动,那么它...

  • CSS之浮动float

    浮动 1.1 浮动的元素 在CSS中,浮动通过float属性实现。 取值: left | right | non...

  • CSS之清除浮动

    三个浮动的元素 当外层DIV.outer 没有设置高度,如果它里面的元素不浮动的话,那么这个外层的高是会自动被撑开...

  • css之清除浮动

    1、给下一个元素加clear:both;缺点:导致下一个元素,margin失效。 2、给空元素加clear:bot...

网友评论

    本文标题:CSS入门八之浮动

    本文链接:https://www.haomeiwen.com/subject/svaygktx.html