浮动float简单理解

最新推荐文章于 2022-03-31 19:07:29 发布

罗彬桦

最新推荐文章于 2022-03-31 19:07:29 发布

阅读量207

点赞数

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/weixin_45647118/article/details/112855695

版权

前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

浮动Float

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另外一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得像浮动框不存在一样。
在这里插入图片描述

@charset "utf-8";

.box1{
    width:100px;
    height:120px;
    border:1px solid #F00;
    background-color:#CF9;
}
.box2{
    width:100px;
    height:150px;
    border:20px solid #00F;
    background-color:#FF6;
}

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link href="box.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="box1">这是盒子1的内容</div>
    <div class="box2">这是盒子2的内容</div>
</body>

在这里插入图片描述
为什么会这样呢？因为div是块级元素，所以会紧接着换行。最后两个盒子是竖排列的。

box2有浮动元素。

@charset "utf-8";

.box1{
    width:100px;
    height:120px;
    border:1px solid #F00;
    background-color:#CF9;
}
.box2{
    width:100px;
    height:150px;
    border:20px solid #00F;
    background-color:#FF6;
    float:left;
}

如下图：
在这里插入图片描述

box1和box2都有浮动

@charset "utf-8";

.box1{
    width:100px;
    height:120px;
    border:1px solid #F00;
    background-color:#CF9;
    float:left;
}
.box2{
    width:100px;
    height:150px;
    border:20px solid #00F;
    background-color:#FF6;
    float:left;
}

如下图：
在这里插入图片描述
注意： box1宽度和box2宽度加起来不能超过整个页面的宽度不然会换行。

@charset "utf-8";

.box1{
    width:100px;
    height:120px;
    border:1px solid #F00;
    background-color:#CF9;
    float:left;
}
.box2{
    width:1500px; //改成了1500
    height:150px;
    border:20px solid #00F;
    background-color:#FF6;
    float:left;
}

在这里插入图片描述

box1和box2并行box3下行

@charset "utf-8";

.box1{
    width:100px;
    height:120px;
    border:1px solid #F00;
    background-color:#CF9;
    float:left;
}
.box2{
    width:1500px; //改成了1500
    height:150px;
    border:20px solid #00F;
    background-color:#FF6;
    float:left;
}
.box3{
    width:500px;
    height:500px;
    border:1px solid #3F6;
    background-color:#C6C;
}

在这里插入图片描述
如果像让盒子3出现在如下图这个位置。该如何实现呢？

清除浮动clear

clear 属性规定元素的那一侧不允许其他浮动元素。
在这里插入图片描述

@charset "utf-8";

.box1{
    width:100px;
    height:120px;
    border:1px solid #F00;
    background-color:#CF9;
    float:left;
}
.box2{
    width:1500px; //改成了1500
    height:150px;
    border:20px solid #00F;
    background-color:#FF6;
    float:left;
}
.box3{
    width:500px;
    height:500px;
    border:1px solid #3F6;
    background-color:#C6C;
    clear:left; //清除浮动
}

在这里插入图片描述

罗彬桦

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浮动float简单理解

浮动Float浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另外一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得像浮动框不存在一样。@charset "utf-8";.box1{ width:100px; height:120px; border:1px solid #F00; background-color:#CF9;}.box2{ width:100px; height:150px; bor
复制链接

扫一扫

专栏目录