css--float浮动

简介: css--float浮动

前戏


前面我们学习了CSS相关的知识,现在试想一下,如果我们想把两个div放在一行显示,该怎么处理?前面也说过,div是块级标签,默认占一行,这时候如果想要达成效果,那就要用到float了


float


float中的四个参数

float:left      左浮动
float:right     右浮动
float:none      不浮动
float:inherit   继承

先来看一下不加float的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
         *{padding: 0;margin: 0}
        div{height:100px;width:100px;background: red}
     </style>
</head>
<body>
        <div>1</div>
        <div>2</div>
</body>
</html>


left

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
         *{padding: 0;margin: 0}
        div{height:100px;width:100px;background: red;
            text-align: center;
         line-height: 100px;}
         div{float: left;
            margin-right: 10px;
         }
     </style>
</head>
<body>
        <div class="c1">1</div>
        <div class="c2">2</div>
</body>
</html>


right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
         *{padding: 0;margin: 0}
        div{height:100px;width:100px;background: red;
            text-align: center;
         line-height: 100px;}
         div{float: right;
            margin-right: 10px;
         }
     </style>
</head>
<body>
        <div class="c1">1</div>
        <div class="c2">2</div>
</body>
</html>

注意:float:right时,两个div的顺序就反过来了,因为先把c1的浮动到最右边,然后浮动c2


none

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
         *{padding: 0;margin: 0}
        div{height:100px;width:100px;background: red;
            text-align: center;
         line-height: 100px;}
         div{float: none;
            margin-right: 10px;
         }
     </style>
</head>
<body>
        <div class="c1">1</div>
        <div class="c2">2</div>
</body>
</html>

none就是不浮动,就和默认的div一样的效果


inherit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
         *{padding: 0;margin: 0}
        div{height:100px;width:100px;background: red;
            text-align: center;
         line-height: 100px;}
         .test{float: right;
            height: 200px;width: 200px;background: green;
         }
         .c1,.c2{
             float: inherit;
            margin-top:10px; }
     </style>
</head>
<body>
    <div class="test">
        <div class="c1">1</div>
        <div class="c2">2</div>
    </div>
</body>
</html>

代码解释:

我们给class为c1和c2的加上了float: inherit;给它的父元素加上了float: right,所以父元素会像右浮动,但是因为c1和c2继承了父元素的浮动,所以也会像右浮动,解释完毕。


float的副作用


<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
            .c1,.c2{background: red;float: left;height: 30px;width: 20px;margin-right: 10px}
            .c3{background: green;height: 100px;width: 100px;}
     </style>
</head>
<body>
    <div class="test">
        <div class="c1">1</div>
        <div class="c2">2</div>
        <div class="c3"></div>
    </div>
</body>
</html>

我们可以看到,上面绿色的框产生了易位,原本是要想绿色的框在红色的下面显示,这就是浮动的副作用之一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
            .test{border: 1px solid red;}
            .c1,.c2{background: red;float: left;height: 30px;width: 20px;
                margin-right: 10px}
            .c3{background: green;height: 100px;width: 100px;}
     </style>
</head>
<body>
    <div class="test">
        <div class="c1">1</div>
        <div class="c2">2</div>
<!--        <div class="c3"></div>-->
    </div>
</body>
</html>

如果我们给上面的代码没有添加float,则子元素会把父元素的高度撑起来,加上float之后,父元素的高度就成了一条线。这也是float的副作用


清除浮动的副作用


清除浮动的副作用有四种方法

1. 手动给父元素设置高度

2.通过clear清除内部和外部浮动

3.给父元素添加overfloat属性并结合zoom:1使用

4.给父元素添加浮动


手动给父元素设置高度

我们先来看一下副作用

View Code

给父元素设置高度height:30px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
            .test{border: 1px solid red;
                width:100px;
                height:30px; }
            .c1,.c2{background: red;float: left;height: 30px;width: 20px;
                margin-right: 10px}
     </style>
</head>
<body>
    <div class="test">
        <div class="c1">1</div>
        <div class="c2">2</div>
    </div>
</body>
</html>

但是我们想一想,如果子标签有多个,是不是就超过了父元素的高度呢?

View Code

经常测试,发现真是这样的,那我们使用添加overfloat属性并结合zoom来试一下,看能不能解决掉我们的问题


overflow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
            .test{border: 1px solid red;
                width:100px;
                overflow: hidden;
                zoom: 1}
            .c1,.c2{background: red;float: left;height: 30px;width: 20px;
                margin-right: 10px}
     </style>
</head>
<body>
    <div class="test">
        <div class="c1">1</div>
        <div class="c2">2</div>
        <div class="c2">2</div>
        <div class="c2">2</div>
        <div class="c2">2</div>
        <div class="c2">2</div>
    </div>
</body>
</html>

解释:overflow是将溢出的截取掉

经过测试发现,完美的解决了我们的问题


通过clear清除内部和外部浮动

clear有四个属性

clear:none
clear:left    左边不允许有浮动
clear:right   右边不允许有浮动
clear:both    左右都不允许有浮动

 

先来看一下副作用的效果

View Code

使用clear:left解决副作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
            .test{border: 1px solid red;
                width:100px;
                height:100px; }
            .c1{background: red;float: left;height: 30px;width: 20px;
                margin-right: 10px}
            .c2{background: green;height:50px;width:30px;
                clear: left;
            }
     </style>
</head>
<body>
    <div class="test">
        <div class="c1">1</div>
        <div class="c2">2</div>
    </div>
</body>
</html>

其余的三个也是同理,就不做具体的演示


给父元素添加浮动

还是先看一下副作用的效果

View Code

我们给父元素也加上浮动float:left

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
            .test{border: 1px solid red;
                width:100px;
                float: left;
                }
            .c1,.c2{background: red;float: left;height: 30px;width: 20px;
                margin-right: 10px}
     </style>
</head>
<body>
    <div class="test">
        <div class="c1">1</div>
        <div class="c2">2</div>
        <div class="c2">2</div>
        <div class="c2">2</div>
        <div class="c2">2</div>
        <div class="c2">2</div>
    </div>
</body>
</html>

刷新之后,也能解决我们的问题,那给父元素添加一个兄弟元素看看效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
            .test{border: 1px solid red;
                width:100px;
                float: left;
                }
            .c1,.c2{background: red;float: left;height: 30px;width: 20px;
                margin-right: 10px}
            .c3{height: 100px;width: 100px;background: #4d4d4d}
     </style>
</head>
<body>
    <div class="test">
        <div class="c1">1</div>
        <div class="c2">2</div>
        <div class="c2">2</div>
        <div class="c2">2</div>
        <div class="c2">2</div>
        <div class="c2">2</div>
    </div>
    <div class="c3">啦啦</div>
</body>
</html>

刷新之后发现,虽然父元素的问题解决了,但是它的兄弟标签有嵌入到了里面,我们可以给兄弟标签加上clear:both解决

点我偷看


小练习


使用浮动完成以下效果

 

点我偷看


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

热门文章

最新文章