CSS核心内容之浮动

简介: 1.浮动涉及到左浮动,右浮动,清除浮动.2.浮点的特点:1.向指定的方向浮动,并且让出空间2.如果后面的元素也是浮动的,那么后面的元素就会在碰到前面的浮动的元素或者边框时,就定位在那里3.如果后面的元素没有浮动,则该元素就会在浮动的元素的下面4.

1.浮动涉及到左浮动,右浮动,清除浮动.

2.浮点的特点:

1.向指定的方向浮动,并且让出空间
2.如果后面的元素也是浮动的,那么后面的元素就会在碰到前面的浮动的元素或者边框时,就定位在那里
3.如果后面的元素没有浮动,则该元素就会在浮动的元素的下面
4.行内元素和块元素都可以浮动,行内元素浮动后会变成块元素
5.浮动的元素不占用空间

3.左浮动的实例代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .div1{
            border:1px solid red;
            width:500px;
            height: 240px;
        }
        .div-box1{
            width:150px;
            height:100px;
            background-color:pink;
            border:1px solid blue;
            float:left;/*使用左浮动*/
            margin-top:5px;
            margin-left:5px;
        }
        .span1{
            background-color:silver;
            width:150px;
            height:100px;
            float:left;/*行内元素浮动后会变成块元素*/
            margin-top:5px;
            margin-left:5px;
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="div-box1">div1</div>
    <div class="div-box1">div2</div>
    <div class="div-box1">div3</div>
    <div class="div-box1">div3</div>
    <span class="span1">span1</span>
    <span class="span1">span2</span>
</div>
</body>
</html>

效果如下:

img_02425378d28ced8b5660edf2ade9d79b.png

当然也可以使用多元素选择器把两个标签放在一起来调整样式.

修改后的代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .div1{
            border:1px solid red;
            width:500px;
            height: 240px;
        }
        .div-box1,.span1{
            width:150px;
            height:100px;
            background-color:pink;
            border:1px solid blue;
            float:left;/*使用左浮动*/
            margin-top:5px;
            margin-left:5px;
        }
        .span1{
            background-color:silver;
            /*width:150px;*/
            /*height:100px;*/
            /*float:left;!*行内元素浮动后会变成块元素*!*/
            /*margin-top:5px;*/
            /*margin-left:5px;*/
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="div-box1">div1</div>
    <div class="div-box1">div2</div>
    <div class="div-box1">div3</div>
    <div class="div-box1">div3</div>
    <span class="span1">span1</span>
    <span class="span1">span2</span>
</div>
</body>
</html>

效果如下:

img_57a098a902555244b003381926f37a76.png

可以看到基本效果并没有改变,只是多个一个边框而已.

那么浮动是怎么让出空间的呢??

来看下面的代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .div-box1{
            background-color:red;
            width:60px;
            height:40px;
            float:left;
        }
        .div-box2{
            width:120px;
            height:60px;
            background-color:blue;
        }
        .div-box3{
            width:200px;
            height:100px;
            background-color:yellow;
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="div-box1">div1</div>
    <div class="div-box2">div2</div>
    <div class="div-box3">div3</div>
</div>
</body>
</html>

效果如下:

img_542139cce7a28a0c57c2307d6007418d.png

如果让div-box2也浮动起来,效果会是怎么样的呢??

div-box2添加浮动,代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .div-box1{
            background-color:red;
            width:60px;
            height:40px;
            float:left;
        }
        .div-box2{
            width:120px;
            height:60px;
            background-color:blue;
            float:left;
        }
        .div-box3{
            width:200px;
            height:100px;
            background-color:yellow;
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="div-box1">div1</div>
    <div class="div-box2">div2</div>
    <div class="div-box3">div3</div>
</div>
</body>
</html>

效果如下:

img_f0297aaf67c1a6aaca6f250a937e1b0a.png

4.浮动的元素不占用空间,该怎么理解呢?

来看下面的代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .div-box1{
            background-color:red;
            width:60px;
            height:40px;
            float:left;/*设置左浮动*/
        }
        .div-box2{
            width:120px;
            height:60px;
            background-color:blue;
            float:left;/*设置左浮动*/
        }
        .div-box3{
            width:200px;
            height:100px;
            background-color:yellow;
            float:left;/*设置左浮动*/
        }
        .div1{
            width:500px;
            border:1px solid black;
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="div-box1">div1</div>
    <div class="div-box2">div2</div>
    <div class="div-box3">div3</div>
</div>
</body>
</html>

效果如下:

img_7eccf17d9609bddde1a9f6afa48bec5d.png

当一个大的div包括了若干小div,如果父div的内的所有子div都浮动,则父div的高度为0.

当把一个div设置成右浮动时,这个div脱离标准流并且向右浮动,直到它的右边缘接触到包含框的右边缘.

5.右浮动的实例:

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .div-box{
            background-color:blue;
            width:60px;
            height:40px;
            margin:5px;
        }
        .div1{
            width:200px;
            height:200px;
            border:1px solid red;
        }
        .te{
            float:right;
            margin-right:20px;
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="div-box te">div1</div>
    <div class="div-box">div2</div>
    <div class="div-box">div3</div>
</div>
</body>
</html>

效果如下:

img_98732b3ec5eadeee0c8c787d272d0654.png

6.浮动的卡的现象

如果浮动元素的高度不同,那么当其向下移动的时候,可能会被其他浮动元素"卡住",直到调整到合适的高度时,才会恢复到正常的高度

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .div-box{
            background-color:deeppink;
            width:100px;
            height:50px;
            margin:5px;
            float:left;
        }
        .div1{
            width:500px;
            height:200px;
            border:1px solid red;
        }
        .te{
            height:100px;
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="div-box te">div1</div>
    <div class="div-box">div2</div>
    <div class="div-box">div3</div>
    <div class="div-box">div3</div>
    <div class="div-box">div3</div>
    <div class="div-box">div3</div>
    <div class="div-box">div3</div>
    <div class="div-box">div3</div>
    <div class="div-box">div3</div>
    <div class="div-box">div3</div>
    <div class="div-box">div3</div>
</div>
</body>
</html>

效果如下:

img_5d236e7200ae608c19005570182db5da.png

目录
相关文章
|
10月前
|
前端开发
【前端|CSS系列第3篇】CSS盒模型、浮动及定位
【前端|CSS系列第3篇】CSS盒模型、浮动及定位
138 1
|
8月前
|
前端开发
5.CSS学习(浮动)
【7月更文挑战第29天】
53 4
|
4月前
|
前端开发
CSS 浮动属性讲解和使用
本文介绍了CSS中的浮动(float)属性,包括其基本功能、属性选项及其在网页布局中的应用。浮动使元素脱离文档流,向左或右排列,周围元素随之调整。文章还详细讲解了清除浮动的方法,如使用clear属性、设置父元素高度、利用overflow属性、伪元素等,以解决因浮动导致的布局问题。最后,强调了浮动在创建复杂布局时的作用,并预告后续内容。
75 2
|
9月前
|
前端开发 容器
CSS基础-浮动:float与清除浮动
【6月更文挑战第9天】本文介绍了CSS中的`float`属性,用于创建多列布局和图文混排,但会导致浮动塌陷和元素重叠问题。为解决这些问题,文章探讨了`clear`属性的四种清除浮动方法,包括`clear`属性、空元素、伪元素和`overflow`方法。随着Flexbox和Grid布局的兴起,它们在某些场景下替代了浮动,但理解浮动原理仍是布局基础。掌握浮动和清除浮动技巧对构建稳定布局至关重要。
98 5
|
6月前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍,主要解决多个`&lt;div&gt;`标签在同一行显示的问题,即一个在左边,另一个在右边。文中介绍了标准流、浮动及flex布局的概念,重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法,包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法,并提供了示例代码帮助理解。
|
7月前
|
前端开发 容器
前端面试热门问题--浮动和清除浮动(CSS)
前端面试热门问题--浮动和清除浮动(CSS)
|
9月前
|
前端开发 UED 容器
纯CSS画浮动卡通蓝天白云草坪动画效果
【6月更文挑战第1天】网页设计中,通过创新技巧,可以使用HTML和CSS模拟云朵漂浮和草地动画效果,提升用户体验。背景实现采用线性渐变动画,使背景颜色从浅青至白平滑过渡并循环移动。云朵效果通过多个不同大小和位置的`<div>`元素,结合CSS的`position: absolute;`和`@keyframes`动画实现浮动。草的动画则是通过三角形形状及`::before`和`::after`伪元素创造,配合不同动画速度和角度模拟自然摆动。完整代码可在提供的链接中下载。
129 1
|
8月前
|
前端开发
CSS:浮动
CSS:浮动
|
9月前
|
前端开发 容器
CSS浮动(如果想知道CSS有关浮动的知识点,那么只看这一篇就足够了!)
CSS浮动(如果想知道CSS有关浮动的知识点,那么只看这一篇就足够了!)
|
10月前
|
人工智能 前端开发 容器
CSS 浮动
CSS 浮动
78 1

热门文章

最新文章