float浮动小结

最新推荐文章于 2023-04-20 17:54:27 发布
最新推荐文章于 2023-04-20 17:54:27 发布
阅读量2.9k 收藏 19
点赞数 6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wyyandyou_6/article/details/81175190
版权

1、float这一属性虽然解决了让块级元素并排显示，但是也造成了一些缺陷等问题，下面进行逐一分析float造成的问题；

1，破坏了流式布局

html本身自带一种布局即流式布局，流式布局就是元素从上到下，从左到右依次布局，并且块级元素独占一行，行级元素并排显示，当块级元素使用float之后会并排显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .father{
        width: 600px;
        height: 600px;
        border: 1px solid red;
    }
    .son1{
        width: 100px;
        height: 100px;
        background: blue;
        float: left;
    }
    .son2{
        width: 140px;
        height: 140px;
        background: gold;
        float: left;
    }


    </style>
</head>
<body>
    <div class="father">
       <div class="son1">这是第一个div</div>
       <div class="son2">这是第二个div</div>
    </div>
</body>
</html>

当son1和son2都浮动时，可以让div在一排显示；

2，块级元素浮动后具有包裹性

当块级元素没有设置宽时，默认是占父元素的100%，高度是内容的高度，当给块级元素设置浮动后，他的宽度变为内容的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .father{
        width: 600px;
        height: 300px;
        border: 1px solid red;
    }
    .son1{

        background: blue;
        float: left;
    }
    .son2{

        background: gold;
        float: left;
    }


    </style>
</head>
<body>
    <div class="father">
       <div class="son1">这是第一个div</div>
       <div class="son2">这是第二个div</div>
    </div>
</body>
</html>

没有给son1和son2设置浮动时默认样式为：
这里写图片描述
设置浮动后：
这里写图片描述

3，让行级元素浮动后变成了块级元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .father{
        width: 600px;
        height: 300px;
        border: 1px solid red;
    }
   span{
       background: green;
       float: left;
       width: 100px;
       height: 100px;

   }
  </style>
</head>
<body>
    <div class="father">
       <span>这是行级元素</span>
    </div>
</body>
</html>

行级元素浮动后可以设置宽和高：
这里写图片描述
所以综上所述，浮动具有以下特点：
1）破坏了流式布局
2）块级元素浮动后具有包裹性
3）让行级元素浮动后变成了块级元素

3、当父元素没有设置宽高时，父元素的所有子元素都浮动后，父元素会塌陷
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .father{

        border: 1px solid red;
    }
    .son1{

        background: blue;
        float: left;
    }
    .son2{

        background: gold;
        float: left;
    }


    </style>
</head>
<body>
    <div class="father">
       <div class="son1">这是第一个div</div>
       <div class="son2">这是第二个div</div>
    </div>
</body>
</html>

当son1 和son2都没有浮动时，父元素的高度为子元素的高度总和，但是son1和son2都浮动后，效果如下：

这里写图片描述
这就造成了父元素塌陷

4、父元素未设置宽高时，浮动会对父元素后面的元素造成影响：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .father{


        border: 1px solid red;
    }
    .son1{

        background: blue;
        float: left;
        width: 100px;
        height: 100px;
    }
    .son2{

        background: gold;
        float: left;
        width: 100px;
        height: 100px;
    }
    .neighbor{
        width: 300px;
        height: 300px;
        background: green;
    }


    </style>
</head>
<body>
    <div class="father">
       <div class="son1">这是第一个div</div>
       <div class="son2">这是第二个div</div>
    </div>
    <div class="neighbor">

    </div>
</body>
</html>

这里写图片描述

2、浮动会对父元素或是父元素后面的元素造成一定的影响，就需要清除浮动造成的影响

清除浮动造成的影响有以下几种方法：
1、给父元素设置高度
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .father{
       width: 300px;
       height: 300px;

        border: 1px solid red;
    }
    .son1{

        background: blue;
        float: left;
        width: 100px;
        height: 100px;
    }
    .son2{

        background: gold;
        float: left;
        width: 100px;
        height: 100px;
    }
    .neighbor{
        width: 300px;
        height: 300px;
        background: green;
    }


    </style>
</head>
<body>
    <div class="father">
       <div class="son1">这是第一个div</div>
       <div class="son2">这是第二个div</div>
    </div>
    <div class="neighbor">

    </div>
</body>
</html>

这里写图片描述

2、给父元素设置overflow：hidden；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .father{
        overflow: hidden;
        border: 1px solid red;
    }
    .son1{

        background: blue;
        float: left;
        width: 100px;
        height: 100px;
    }
    .son2{

        background: gold;
        float: left;
        width: 100px;
        height: 100px;
    }
    .neighbor{
        width: 300px;
        height: 300px;
        background: green;
    }


    </style>
</head>
<body>
    <div class="father">
       <div class="son1">这是第一个div</div>
       <div class="son2">这是第二个div</div>
    </div>
    <div class="neighbor">

    </div>
</body>
</html>

利用overflow:hidden一个副作用：强制浏览器算父元素的高度，但是overflow：hidden也解决了父元素高度塌陷问题，宽度为默认宽度
这里写图片描述

3、利用clear属性清除浮动

clear：left;清除左浮动；
clear：right;清除又浮动；
clear:both;清除左右浮动

使用这个属性，要求元素必须是块级的。

使用方法：1，给父元素添加一个空的块级元素，
2、不让这个空的块级元素浮动，并给他添加clear：both；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .father{

        border: 1px solid red;
    }
    .son1{

        background: blue;
        float: left;
        width: 100px;
        height: 100px;
    }
    .son2{

        background: gold;
        float: left;
        width: 100px;
        height: 100px;
    }
    .son3{
        clear: both;
    }
    .neighbor{
        width: 300px;
        height: 300px;
        background: green;
    }


    </style>
</head>
<body>
    <div class="father">
       <div class="son1">这是第一个div</div>
       <div class="son2">这是第二个div</div>
       <div class="son3"></div>
    </div>
    <div class="neighbor">

    </div>
</body>
</html>

没有给son3添加clear：botn时neighbor会钻上去，并且father高度会塌陷，如下：
这里写图片描述
但是给son3设置clear：both后如下

这里写图片描述

4、利用after伪元素清除浮动；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .father{

        border: 1px solid red;
    }
    .son1{

        background: blue;
        float: left;
        width: 100px;
        height: 100px;
    }
    .son2{

        background: gold;
        float: left;
        width: 100px;
        height: 100px;
    }
    .son3{
        clear: both;
    }
    .neighbor{
        width: 300px;
        height: 300px;
        background: green;
    }
    /* 设置一个清除浮动的类，哪里需要清除浮动只需添加这个类就行了 */
    .clear:after{  
        clear: both;
        display: block;
        content: "";
    }
    </style>
</head>
<body>
    <div class="father clear">
       <div class="son1">这是第一个div</div>
       <div class="son2">这是第二个div</div>

    </div>
    <div class="neighbor">

    </div>
</body>
</html>

效果如下：
这里写图片描述

总结的有些地方不全面，欢迎补充说明

奋斗的妍
关注
  • 6
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSS清除浮动float的三种方法小结
01-19
float:none 不使用浮动 float:left 靠左浮动 float:right 靠右浮动 二、浮动的用途 可设置文字环绕或使元素宽度由内容填充（类似Inline-block)。使用浮动需要注意的是如果浮动的元素高度比父级容器还高，那么需要...
浮动（Float）
qq_52301431的博客
03-31 3354
17、浮动（Float） 17.1、什么是文档流？ 文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中 元素在文档流中的特点： 块元素： 块元素在文档流中会独占一行，块元素会自上向下排列 行内元素： 行内元素在文档流中只占自身的大小，会默认从左向右排列 17.2、什么是浮动？ 元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，浮动的框可以向左或向右移动， 直到它的外边缘碰到包含框或另一个浮动框的边框为止(会挨着父元素左边或右边排列，如果之前有浮
CSS - 浮动布局（float）
热门推荐
伏城之外的博客
07-20 1万+
标准布局、标准流、标准布局的不足、浮动、浮动流、浮动元素特点、脱标、父容器高度塌陷、清除浮动、clear、额外标签法、::after伪元素法、浮动元素margin负值原理、双飞翼布局、圣杯布局、三栏式布局......
浮动的概念作用特点产生浮动的原因和清除浮动的方法
weixin_50659023的博客
09-10 4492
一， 浮动float CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中浮动让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。 什么是浮动(float) 概念：元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制移动到指定位置。 作用： 让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。 可以实现盒子的左右对齐等等. 浮动最早是用来控制图片，实现文字环绕图片的效果。 语法： 选择器 { float: 属性值; } 浮动的特点 清除概念的方法
什么是浮动？
m0_55832273的博客
03-20 3211
浮动（float）：float是css样式中的定位属性，用于设置标签对象（如：< div>标签盒子、< span>标签、标签、< em>标签等html标签）的浮动布局，浮动也就是我们所说标签对象浮动居左靠左（float:left;）和浮动居右靠右(float:right;)。 1.标准文档流 定义：内容是从上往下，从左到右书写的。前面的内容或位置发生改变时，后面的内容也会随之改变。 HTML就是一个标签的文档流，网页上内容的位置，与我们书写的顺序有关。 元素的.
CSS Float 浮动布局
blog
07-13 2718
文章目录前言一、Float 布局二、属性值三、代码实现clear 清除浮动clear 属性值三、Float 设计初衷与不足不足总结 前言 在页面开发的过程中，CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。 当前主要的布局方式有：浮动布局(Float)、定位布局(Position)、弹性布局(Flex)、网格布局(Grid)等，本文将从浮动布局开始学习。 一、Float 布局 把一个元素“浮动”(float)起来，会改变该元素本身和在正常
CSS 同级元素浮动分析小结
01-19
float:left/right/none; 1.同级浮动 （1）使块级元素在同一行显示（所有要在同一行显示的都要加浮动） <div class=box1>box1 <div class=box2>box2 <div class=box3>box3 .box1{ border: 2px solid red; width: ...
CSS清除浮动方法大全(小结)
01-21
1、父级div定义伪类：after和zoom <style type=text/css> .div1{background:#... .left{float:left;width:20%;height:200px;background:#DDD} .right{float:right;width:30%;height:80px;background:#DDD}
CSS清除浮动常用方法小结
10-30
使用div+css（姑且这样叫，虽然我也不喜欢，但是叫什么呢？）布局的好处不用多说，经常性地会使用到float，那么清除浮动就是必须要做的，而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一。
CSS中的float属性
qq_42526440的博客
01-02 1191
float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。 浮动元素是 float 的计算值非 none 的元素。 由于float意味着使用块布局，它在某些情况下修改display 值的计算值： 备注：如果要在 JavaScript 中把float属性当作element.style对象的一个成员来操作，那么在Firefox 34 和更老的版本中，你必须拼写成cssFloat。另外还要注意到在
DIV+CSS布局：CSS浮动float属性详解
07-07
DIV+CSS布局：CSS浮动float属性详解 不解释
前端学习（262）：order
歌谣的博客
12-30 319
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
css 基础 - float 基本使用
龙衣
12-13 1843
文章目录css 中的 float 是什么float 作用场景文本环绕图片文本环绕文本创建整个web布局在小布局中也很有用浮动元素是如何定位的清除 float什么情况下需要清除浮动？如何清除浮动示例 css 中的 float 是什么 Float 是一个 CSS 定位属性，它指定一个元素应沿其容器（块布局）的左侧left或右侧right放置，允许文本和内联元素环绕它。该元素也从网页的正常流动(文档流)中移除。 float 浮动的常用的几种值 值 作用 float:none 表明元素不进行浮动
什么是浮动
gorgeoustudy的博客
07-03 5300
浮动。什么是浮动？元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。 他可以干什么？控制图片，布局. 他有哪些属性？left right none. 他的目的：用于多个块级元素显示在同一行中 浮动很大方，他把位置让给标准流.不占位置，但是他必须得同父级元素共同搭配使用. 为什么要清除浮动？准确来说不是清除浮动本身，而是清除浮动所造成的影响.解决了父...
清除float浮动的三种常见方式
weixin_45012866的博客
04-02 2368
一、为float元素后的元素添加 clear 属性 浮动高度塌陷下的副作用的展示： 添加clear属性之后的显示： 二、利用伪元素并使用clear属性 有时我们会遇到上图的情况，float 元素后没有其他元素了，这时该怎么办？固然我们可以在其后添加一个空div，然后利用clear：both一样解决问题，但这种方式并不优雅，伪元素这时候就派上用场了，我们可以写一个.clearfix 工具样式，当给需要清除浮动时，就为其加上这个类。 清除浮动之前的显示： 清除浮动之后的显示： 三、将父元素的over
如何清除float浮动问题？
Bennnnnnn的博客
04-20 371
clear浮动（float）会导致元素脱离文档流，导致父元素高度塌陷、子元素重叠等问题。
最通俗易懂的浮动（float）布局原理
weixin_44456333的博客
03-21 6024
最通俗易懂的浮动（float）布局原理（图文解释） 声明：本文部分原理总结借鉴该大神。原地址为：https://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 写在前面的话： 1、对于很多刚接触Css的朋友来说对float浮动布局有时候处于一个很模糊的概念 对于很多刚接触Css的朋友来说对float浮动布局有时候处于一个很模糊的概念 ...
Float浮动 及 清除浮动
敏敏的博
11-17 829
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、什么是浮动Float？二、为什么需要浮动？三、浮动的特性1.具有行内块元素的特性2.脱标四、浮动可能产生的影响1、后续标准流被覆盖2、父级盒子高度塌陷问题五、清除浮动1、额外标签法（隔墙法）2、父级添加 overflow 属性3、父级添加after伪元素4、父级添加双伪元素总结 前言 本篇文章总结了float可能对布局产生的影响及清除浮动的方法 提示：以下是本篇文章正文内容，下面案例可供参考 一、什么是浮动Float？
float浮动布局
jieyucx的博客
01-11 496
float浮动布局及其注意点，看着一篇就够了
cssfloat浮动 水平 居中
最新发布
08-19
使用CSS中的float属性进行水平居中有多种方法。其中一种常用的方法是在浮动元素的外层添加一个div，并设置该div的display属性为table-cell，然后使用margin: 0 auto来实现水平居中。同时，还需给相邻的父元素添加...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值