CSS 学习总结（4）--- CSS中的 float 浮动

最新推荐文章于 2024-06-02 10:00:00 发布

送小孩喝稠酒

最新推荐文章于 2024-06-02 10:00:00 发布

阅读量187

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/qq_44823091/article/details/93519925

版权

JavaWeb 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

CSS 学习总结（4）— CSS中的 float 浮动

先说一下标准文档流，

1. 标准文档流

Web页面的制作，是个““流”，必须从上而下，像”织毛衣“。

标准文档流有以下特性：
- 空白会折叠，当出现多个空格、换行、tab时，都会折叠为一个空格。
- 高矮不齐，底边对齐。
- 自动换行，一行写不满，换行写。
在HTML中，标签分为文本级和容器级别。
文本级标签：p、span、a、b、img、u、em。（因为p里面只能放文字、图片和表单元素，不能放h和ul，更不能放p，所以p为文本级标签。）
容器级标签：div、h系列、li、dt、dd。
标准文档流等级严格，标签分为两种等级：行内元素（inline）和块级元素（block）。
在CSS中，和HTML很像，就p不一样。
行内元素：除了p以外的所有文本级标签，都是行内元素。
块级元素：所有容器级标签，加上p元素，都是块级元素。

行内元素与块级元素的不同：

例子：

<head>
    <style>
        div{
            background-color: #86ff3c;
            width: 200px;
            height: 100px;
        }
        h1{
            background-color: crimson;
            width: 200px;
            height: 80px;
        }

        span{
            background-color: #e250d9;
            width: 200px;
            height: 80px;
        }
    </style>
</head>
<body>
    <div> 1号div </div>
    <h1> 大标题</h1>
    <span> span行内元素1</span>
    <span> span行内元素2</span>
</body>

结果图：
在这里插入图片描述

案例中，我们给三个标签设置宽高，但发现，宽高属性值对块级元素h1，div生效。于是，可得结论：

块级元素和行内元素的区别：

行内元素：
与其他行内元素并排；
不能设置宽高，默认的宽度为文字的宽度。
块级元素：
霸占一行，不能与其他任何元素并列；
能接受宽高，如果不设置宽高，那么宽高默认为父级的100%。

2. display属性

可以通过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。

值	说明	功能
block	块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符	块级元素和航迹元素的转换
inline	行内元素的默认值，元素会被显示为行内元素，该元素前后没有换行符	块级元素和航迹元素的转换
inline-block	行内块元素，元素既具有行内元素的特性，又具有块级元素的特性	控制块元素排列到一行，并设置宽高
none	设置元素不会被显示	控制元素的显示和隐藏

块级元素转换为行内元素：

若给一个块级元素设置属性display：inline；，那么这个标签即变为行内元素。此时这个元素便不能设置宽高，qie可以和其他标签并排。

<head>
    <style>
        div{
            display:inline;
            background-color: #1a83ff;
            width: 200px;
            height: 80px;
        }
        h1{
            display:inline;
            background-color: #86ff3c;
            width: 200px;
            height: 80px;
        }
    </style>
</head>
<body>
	<h1>我是h1标签</h1>
	<div>我是一个div标签1</div>
	<div>我是一个div标签2</div>
</body>

结果图：

在这里插入图片描述

行内元素转换成块级元素：
同样，若给行内元素设置属性display:block;，这个标签就变成块级元素。此时这个标签便能够设置高宽，霸占一行，不能与其他元素并排。

<head>
    <style>
        span{
            display: block;
            background-color: #e250d9;
            width: 200px;
            height: 100px;
        }
    </style>    
</head>
<body>
	<span>span标签1</span>
	<span>span标签2</span>
</body>

结果图：
在这里插入图片描述

既有行内元素，又有块级元素属性的元素：

<head>
    <style>
        h1{
            display: inline-block;
            background-color: crimson;
            width: 300px;
            height: 200px;
        }
        #id{
            display: inline-block;
            background-color: crimson;
            width:300px;
            height: 100px;
        }
        div{
            display: inline-block;
            background-color: #86ff3c;
            width: 400px;
            height: 100px;
        }
    </style>
</head>
<body>
    <h1> h1大标题</h1>
    <h1 id="id">h1标题2</h1>
    <div> 1号div </div>
</body>

结果图：
当三个元素的宽度超过包含框的宽度时，第三个元素向下移动。
在这里插入图片描述

那么，如何使块级元素排在一行，并且可以设置宽高？

上面的inline-block属性可以实现此功能，但他仍没有脱离标准流，依然受限制。

在标准流中，限制非常多，也可以使元素脱离标准流。

在CSS中一共有三种手段，使一个元素脱离标准流：
1）浮动； 2）绝对定位； 3）固定定位。

此处要介绍的就是浮动（float）。

3. 浮动（float）

浮动是CSS里面布局用的最多的属性。

浮动的框可以向左或向右移动，制动它的外边缘碰到包含框或另一个浮动框的边框为止。

float属性：

属性值功能
left 元素向左浮动
right 元素向右浮动
none 默认值，元素不浮动，并会显示在其文本中出现的位置

属性值	功能
left	元素向左浮动
right	元素向右浮动
none	默认值，元素不浮动，并会显示在其文本中出现的位置

我们给块级元素h1和div标签增加一个浮动属性float:left;，此元素就可以并排，并设置宽高。

<head>
    <style>
        div{
            float: left;
            background-color: #86ff3c;
            width: 200px;
            height: 100px;
        }
        h1{
            float: left;
            background-color: crimson;
            width: 200px;
            height: 80px;
        }
    </style>
</head>
<body>
    <div> 1号div </div>
    <h1> h1大标题</h1>
</body>

结果图：
在这里插入图片描述
浮动之后：div元素向左浮动，直到碰到边框，h1元素向左浮动直到碰到div元素边框。

没有添加float属性的之前的结果为：div和h1各霸占一行，如图，
在这里插入图片描述

给多个标签添加float属性：

<head>
    <style>
        h1{
            float: left;
            background-color: crimson;
            width: 300px;
            height: 200px;
        }
        #id{
            float: left;
            display: inline-block;
            background-color: #dc61c8;
            width:300px;
            height: 100px;
        }
        div{
            float: left;
            background-color: #86ff3c;
            width: 400px;
            height: 100px;
        }
    </style>
</head>
<body>
    <h1> h1大标题</h1>
    <h1 id="id">h1标题2</h1>
    <div> 1号div </div>
</body>

结果图：
在这里插入图片描述
当三个元素都设置float: left;属性时，三个元素的宽度总和超过包含框宽度，此时第三个元素向下移动，三个元素的高度不同，第三个元素向下移动时，被第一个元素”卡住“。

inline-block和float的区别：

有上面的案例可以看出inline-block和float的区别。

相同点：

可以让元素排在一行，并且支持设置宽高。
不同点：
- display:inline-block：
  
  位置方向不可控制，会解析空格；
  
  IE6、IE7上不支持。
- float：
  
  可以决定排列方向；
  
  float浮动之后元素脱离文档流，会对周围的元素产生影响，必须在它的父级上添加清除浮动的样式。

4. 浮动清除

清除浮动就是指清除浮动与浮动之间的影响。

语法格式：clear：属性值；

属性值	功能
left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在左右两侧不允许浮动元素
none	默认值。允许浮动元素出现在两侧

案例说明：

我们给列表元素添加float，想得到的结果是，让一个容器里的元素浮动到一排。

通过下面的程序，我们定义两组元素，想要实现每一组中的li排成一排。

<head>
    <style>
       li{
            float: left;  //添加float属性
            background-color: #e250d9;
            width: 200px;
            height: 50px;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li>星期一：吃草莓</li>
        <li>星期二：吃西瓜</li>
        <li>星期三：吃甜瓜</li>
    </ul>
</div>
<div class="div2">
    <ul>
        <li>一日之计在于晨</li>
        <li>一年之计在于春</li>
    </ul>
</div>
</body>

结果图：
在这里插入图片描述
结果并非我们想要的，上图中第二组中的第一个li去贴靠了第一组中的最后一个li了，排成了一排。

此时，我们需要清除浮动，给添加了float属性的元素的父级元素添加clear属性。即给div元素添加clear属性。

div{
   	clear: both;
}

结果图：在这里插入图片描述
清除了浮动属性下别人对自己的影响。两组div排成两排。

送小孩喝稠酒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 学习总结（4）--- CSS中的 float 浮动

JAVA Web — CSS 中的浮动（float）先说一下标准文档流，1. 标准文档流Web页面的制作，是个““流”，必须从上而下，像”织毛衣“。标准文档流有以下特性：空白会折叠，当出现多个空格、换行、tab时，都会折叠为一个空格。高矮不齐，底边对齐。自动换行，一行写不满，换行写。在HTML中，标签分为文本级和容器级别。文本级标签：p、span、a、b、img、...
复制链接

扫一扫

专栏目录