AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

07.浮动（上）

2023-05-16 121
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 07.浮动

浮动在网页中的应用


主要用于使得div脱离标准文档流，生成多列布局


image.png

image.png

float属性

left

元素向左浮动

right

元素向右浮动

none

默认值。元素不浮动，并会显示在其文本中出现的位置

浮动就是让元素可以向左或向右移动，直到它的外边距碰到其父级的内边距或者是上一个元素的外边距(这里指的上一个元素不管它有没有设置浮动，都会紧挨着上一个元素）


浮动的特性


1.浮动元素支持所有的css样式

2.内容撑开宽高

3.多个元素设置浮动，宽度足够的话，会排在一行

4.脱离文档流

5.提升层级半级

也就是说：一个元素设置了浮动属性后，下一个元素就会无视这个元素的存在，但是下一个元素中的文本内容依然会为这个元素让出位置使自身的文本内容环绕在设置浮动元素的周围

注意：不管是行级还是块级元素，如果设置了浮动属性，该元素就变成了具有inline-block属性的元素


浮动—都不浮动

<div class="class1">我是块级元素1，没有设置浮动</div>
<div class="class2">我是块级元素2，没有设置浮动</div>
<div class="class3">我是块级元素3，没有设置浮动</div>

.class1 {
            width: 200px;
            height: 100px;
            background: palegreen;
        }
        .class2 {
            width: 250px;
            height: 130px;
            background: gold;
        }
        .class3 {
            width: 300px;
            height: 180px;
            background: red;
        }


image.png


image.png

浮动—第一个div浮动

<div class="class1">我是块级元素1，没有设置浮动</div>
<div class="class2">我是块级元素2，没有设置浮动</div>
<div class="class3">我是块级元素3，没有设置浮动</div>

.class1 {
            width: 200px;
            height: 100px;
            background: palegreen;
            float: left
        }
        .class2 {
            width: 250px;
            height: 130px;
            background: gold;
        }
        .class3 {
            width: 300px;
            height: 180px;
            background: red;
        }

1）没有设置浮动的元素会填充浮动元素留下来的空间

2）浮动元素会和非浮动元素发生重叠，浮动元素会在图层的最上面

3）使用浮动时，该元素会脱离文档流，后面的元素会无视这个元素，但文本依然会为这个浮动元素让出位置，并且元素中的文字内容会环绕在其周围


image.png

image.png

浮动—第二个div浮动

<div class="class1">我是块级元素1，没有设置浮动</div>
<div class="class2">我是块级元素2，没有设置浮动</div>
<div class="class3">我是块级元素3，没有设置浮动</div>

.class1 {
            width: 200px;
            height: 100px;
            background: palegreen;
        }
        .class2 {
            width: 250px;
            height: 130px;
            background: gold;
            float: left
        }
        .class3 {
            width: 300px;
            height: 180px;
            background: red;
        }

浮动元素不会超越其前面的元素


image.png

image.png

浮动—3个div都浮动

<div class="class1">我是块级元素1，没有设置浮动</div>
<div class="class2">我是块级元素2，没有设置浮动</div>
<div class="class3">我是块级元素3，没有设置浮动</div>

.class1 {
            width: 200px;
            height: 100px;
            background: palegreen;
        }
        .class2 {
            width: 250px;
            height: 130px;
            background: gold;
            float: left
        }
        .class3 {
            width: 300px;
            height: 180px;
            background: red;
        }

浏览器宽度足够时，并排排列


image.png

image.png


浏览器宽度不足以容纳最后一个div时，最后一个div掉下来，并且顶部不会超过倒数第二个div的底部。


image.png

image.png


浮动—父子关系

<div id="wrap2">
    <div class="class1"></div>
    <div class="class2"></div>
    <div class="class3"></div>
    <div class="class4"></div>
</div>

#wrap2 {
            width: 550px;
            height: 900px;
            border: 3px solid red;
        }
        .class1 {
            width: 200px;
            height: 400px;
            background: blue;
            float: left;
        }
        .class2 {
            width: 200px;
            height: 300px;
            background: yellow;
            float: left;
        }
        .class3 {
            width: 200px;
            height: 300px;
            background: fuchsia;
            float: left;
        }
        .class4 {
            width: 200px;
            height: 200px;
            background: chartreuse;
            float: left;
        }


1）浮动元素不会在其浮动方向上溢出父级的包含块

也就是说元素左浮动，其左外边距不会超过父级的左内边距，元素右浮动，其右外边距不会超过父级的右内边距

2）浮动元素的位置受到同级同向浮动元素的影响

也就是说同一父级中有多个浮动元素，后一个元素的位置会受到前一个浮动元素位置的影响，他们不会相互遮挡，后一个浮动元素会紧挨着前一个浮动元素的左外边距进行定位，如果当前空间不足，则会换行，否则会放置在前一个浮动元素的下面


image.png

image.png

浮动影响父层盒子高度


父元素的高度靠子元素撑开，子元素全部浮动后，均脱离文档流，父元素高度塌陷

<div id="wrap2">
    <div class="class1"></div>
    <div class="class2"></div>
    <div class="class3"></div>
    <div class="class4"></div>
</div>

#wrap2 {
            width: 550px;
            border: 3px solid red;
        }
        .class1 {
            width: 200px;
            height: 400px;
            background: blue;
            float: left;
        }
        .class2 {
            width: 200px;
            height: 300px;
            background: yellow;
            float: left;
        }
        .class3 {
            width: 200px;
            height: 300px;
            background: fuchsia;
            float: left;
        }
        .class4 {
            width: 200px;
            height: 200px;
            background: chartreuse;
            float: left;
        }


image.png

image.png


溢出处理


overflow属性

visible

默认值。内容不会被修剪，会呈现在盒子之外

hidden

内容会被修剪，并且其余内容是不可见的

scroll

内容会被修剪，但是浏览器会显示滚动条以便查看其余内容

auto

如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容


overflow属性的妙用


使用overflow扩展盒子高度，overflow属性会触发浏览器重新计算父元素盒子高度

<div id="wrap2">
    <div class="class1"></div>
    <div class="class2"></div>
    <div class="class3"></div>
    <div class="class4"></div>
</div>

#wrap2 {
            width: 550px;
            border: 3px solid red;
        overflow:hidden;
        }
        .class1 {
            width: 200px;
            height: 400px;
            background: blue;
            float: left;
        }
        .class2 {
            width: 200px;
            height: 300px;
            background: yellow;
            float: left;
        }
        .class3 {
            width: 200px;
            height: 300px;
            background: fuchsia;
            float: left;
        }
        .class4 {
            width: 200px;
            height: 200px;
            background: chartreuse;
            float: left;
        }


image.png

image.png


清除浮动


clear属性

left

在左侧不允许浮动元素

right

在右侧不允许浮动元素

both

在左、右两侧不允许浮动元素

none

默认值。允许浮动元素出现在两侧


清除两测浮动


清除两侧浮动，有扩展父级盒子高度的作用

<div id="wrap2">
    <div class="class1"></div>
    <div class="class2"></div>
    <div class="class3"></div>
    <div class="class4"></div>
     <p class="txt">我是一段文本我是一段文本我是一段文本我是一段文本</p>
</div>

#wrap2 {
            width: 550px;
            border: 3px solid red;
        }
        .class1 {
            width: 200px;
            height: 400px;
            background: blue;
            float: left;
        }
        .class2 {
            width: 200px;
            height: 300px;
            background: yellow;
            float: left;
        }
        .class3 {
            width: 200px;
            height: 300px;
            background: fuchsia;
            float: left;
        }
        .class4 {
            width: 200px;
            height: 200px;
            background: chartreuse;
            float: left;
        }
        .txt {
            clear: both
        }

清除两侧浮动前

image.png

image.png

清除两侧浮动后，有扩展父级盒子高度的作用

image.png

image.png


制作有路网水平导航菜单


image.png

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="reset.css" rel="stylesheet">
    <style>
        .red-nav{
            height: 38px;
            background-color: #D80000;
        }
        .red-nav li{
            float: left;
            line-height: 38px;
            font-size: 16px;
            font-weight: bold;
            padding: 0 25px;
        }
        .red-nav li a{
            color: white;
        }
        .red-nav li:hover{
            background-color: #C90000;
        }
        .red-nav .first{
            background-color: #C90000;
            padding-left: 20px;
            padding-right: 100px;
            /*margin-right: 100px;*/
        }
    </style>
</head>
<body>
<div class="red-nav">
    <ul>
        <li class="first">
            <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>
        <li>
            <a href="#">考试</a>
        </li>
        <li>
            <a href="#">考试</a>
        </li>
    </ul>
</div>
</body>
</html>

Flexbox版

.red-nav ul{
          display: flex;
        }
        .red-nav li{
            /* float: left; */
            flex:0 0 auto;
            line-height: 38px;
            font-size: 16px;
            font-weight: bold;
            padding: 0 25px;


文章标签：
前端开发
豆约翰
目录
相关文章
大树营养快线
|
2月前
|
编解码 前端开发
浮动布局
【10月更文挑战第27天】浮动布局在实现多列布局和图文混排等方面具有一定的优势，但也存在高度塌陷和定位控制等缺点。通过合理地选择清除浮动的方式，可以有效地解决浮动布局带来的问题，确保页面布局的稳定和正确显示。
大树营养快线
40 2
大树营养快线
|
2月前
|
前端开发
除了伪元素清除法，还有哪些方法可以解决浮动布局的高度塌陷问题
【10月更文挑战第27天】不同的方法适用于不同的场景和布局需求，在实际开发中，需要根据具体情况选择最合适的方法来解决浮动布局的高度塌陷问题。
大树营养快线
61 2
大树营养快线
|
2月前
|
前端开发
哪些方法可以解决浮动布局的高度塌陷问题？
【10月更文挑战第27天】
大树营养快线
59 1
lvbb66
|
5月前
|
前端开发 容器
cssfloat浮动
cssfloat浮动
lvbb66
48 1
爱你三千遍斯塔克
|
6月前
如何让一个盒子居中，解决盒子塌陷的方法
如何让一个盒子居中，解决盒子塌陷的方法
爱你三千遍斯塔克
46 0
find_starshine
|
8月前
浮动和定位
浮动和定位
find_starshine
46 0
a15034260562-24955
|
8月前
浮动
浮动
a15034260562-24955
31 0
讓丄帝愛伱
|
前端开发
CSS布局讲解-float浮动布局使用
CSS布局讲解-float浮动布局使用
讓丄帝愛伱
95 0
吃豆子的恐龙
盒子模型、浮动、定位
盒子模型、浮动、定位
吃豆子的恐龙
81 0
豆约翰
07.浮动（下）
07.浮动
豆约翰
63 0