CSS中的float

文章目录

CSS中的float
1、float浮动属性
2、float文字环绕图片
3、float浮动的真正原因以及副作用分析
4、清除浮动的四种解决方法
5、实际应用导航效果

复习一波简单记录 - 慕课网 - 从网页搭建入门JavaWeb

1、float浮动属性

float中的四个参数

float:left; 左浮动

float:right;右浮动

float:none;不浮动

float:inherit;继承浮动

控制元素

inherit 子元素继承父元素的浮动属性，父元素没有float ，inherit 子元素失效没有继承

例子：

左浮动这两个块元素

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>float</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .test{

            width: 100px;

            height: 100px;

            background: red;

            float: left;

        }

    </style>

</head>

<body>

    <div class="test"></div>

     <div class="test"></div>

</body>

</html>

继承父元素子元素左浮动

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>float</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .per{

            width: 300px;

            height: 300px;

            background: blue;

            float: left;

        }

        .test{

            width: 100px;

            height: 100px;

            background: red;

            float: inherit;

        }

    </style>

</head>

<body>

    <div class="per">

        <div class="test"></div>

        <div class="test"></div>

    </div>

</body>

</html>

两个元素右浮动 1到右边 2挨着也就是形成了 2 1 这样的

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>float</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .test{

            width: 100px;

            height: 100px;

            background: red;

            margin-right: 10px;

            float: right;

        }

    </style>

</head>

<body>

        <div class="test">1</div>

        <div class="test">2</div>

</body>

</html>

改为了float:left;

结果为： 1 2

float属性定义了元素在哪个方向进行动

在HTML中任何元素都是可以浮动的

一旦元素添加了float 脱离原来的

2、float文字环绕图片

float属性实现文本环绕效果

float设计文字环绕着图片的

例子：实现比较简单文字环绕图片效果

img float:right 图片被文字环绕了右环绕

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>float</title>

    <style>

        *{

            padding: 0;

            margin: 0;

        }

        .per{

            width: 500px;

            height: 500px;

        }

        img{

            float: right;

        }

    </style>

</head>

<body>

<div class="per"><img src="logo.png" alt="">从网页搭建入门JavaWeb导学视频

    本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！

    步骤1

    网页搭建入门之HTML与CSS

    Java Web入门的第一步！本步骤介绍前端的HTML、CSS基础，以及浮动和定位等内容，学会应用布局进行页面开发。

    第1课 HTML入门

    第2课 CSS入门

    第3课 CSS浮动

    第4课 CSS定位

    步骤2

    网页搭建入门之JavaScript与前端案例

    JavaScript是前端开发中非常重要的内容！除了JavaScript语法，还安排了计算器、油画商城和轮播图等案例，最终能开发出专业美观的页面。

    第1课 JavaScript入门

    第2课 案例：仿计算器

    第3课 前端油画商城案例

    第4课 项目：JavaScript轮播图

    第5课 网页搭建测试

    步骤3

    Java Web入门

    本步骤带领大家进入Java Web的世界，掌握JSP、Servlet、Cookie、Session等内容，通过案例学会使用JSTL进行数据展示。

    第1课 XML入门

    第2课 Servlet入门

    第3课 JSP入门

    第4课 Servlet与JSP进阶

    第5课 JSTL与EL表达式

    第6课 Java Web基础入门测试

    步骤4

    Java Web进阶

    本步骤介绍过滤器、监听器，以及JSON、Ajax和正则表达式等开发必备技能，并通过案例学习文件上传和验证码等功能开发。

    第1课 JSON入门

    第2课 jQuery与Ajax入门

    第3课 Java正则表达式

    第4课 过滤器

    第5课 监听器

    第6课 FreeMarker

    第7课 项目：登录注册功能

    第8课 Java Web基础进阶测试</div>

</body>

</html>

这是为什么呢？

变成块状元素

例如：内联元素不具有宽度高度加了float之后变成了块状元素

元素设置了浮动属性元素脱离正常的标准流文档流但依然占有正常文档流的空间

（现在占的空间大小）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .test{

            width: 100px;

            height: 100px;

            background: red;

            float: left;

        }

        .bro{

            width: 400px;

            height: 300px;

            border: 1px solid #cccccc;

        }

    </style>

</head>

<body>

    <div class="bro">

        <span class="test"></span>

        Java Web入门的第一步！本步骤介绍前端的HTML、CSS基础，以及浮动和定位等内容，学会应用布局进行页面开发。

        Java Web入门的第一步！本步骤介绍前端的HTML、CSS基础，以及浮动和定位等内容，学会应用布局进行页面开发。

        Java Web入门的第一步！本步骤介绍前端的HTML、CSS基础，以及浮动和定位等内容，学会应用布局进行页面开发。

    </div>

</body>

</html>

3、float浮动的真正原因以及副作用分析

CSS的定位机制

1、标准流（普通流）

2、定位

3、浮动

浮动

使得元素脱离了标准流

影响周围的元素

一旦当前的元素浮动，其他的元素受到干扰

而浮动的元素不占有原始空间，无法检测浮动元素（子元素）的高度，会导致父元素塌陷

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>float</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .per{

            width:500px;

            height: auto;

            border: 1px solid #000;

        }

        .test{

            width: 80px;

            height: 30px;

            background: red;

            border: 1px solid #FFF;

        }

        .bro{

            width: 100px;

            height: 100px;

            background: blue;

        }

    </style>

</head>

<body>

    <div class="per">

    <div class="test"></div>

    <div class="test"></div>

    <div class="test"></div>

    <div class="test"></div>

    </div>

    <div class="bro"></div>

</body>

</html>

子元素<div class="test"></div>没有设置 float: left;

结果：

设置了float属性，加上了 float: left;

结果

本来子元素4个 height: 30px; 占120px 设置float属性，变了30px父元素塌陷了，其他元素异位跟上去了。

父元素塌陷以及其他元素异位了

4、清除浮动的四种解决方法

清除浮动 -> 解决塌陷问题

浮动副作用的解决

手动给父元素添加高度
通过clear清除内部和外部浮动
给父元素添加overflow属性并结合zoom:1使用
给父元素添加浮动

手动给父元素添加高度

弊端变化

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>float</title>

    <style>

        .per{

            width: 500px;

            height: 32px;

            border: 1px solid #000;

        }

        .test{

            width: 100px;

            height: 30px;

            background: red;

            border: 1px solid #FFF;

            float: left;

        }

    </style>

</head>

<body>

    <div class="per">

        <div class="test"></div>

        <div class="test"></div>

        <div class="test"></div>

        <div class="test"></div>

        <div class="test"></div>

        <div class="test"></div>

        <div class="test"></div>

        <div class="test"></div>

        <div class="test"></div>

    </div>

</body>

</html>

本来三个子元素浮动高度为 30px,我父元素设置个32px就能解决塌陷问题，后面变了，多了好几个子元素，浮动高度又变了，那我父元素又得设置，麻烦。

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

Clear属性

clear:none
clear:left 不允许左边有浮动的对象
clear:right
clear:both 不允许有浮动的对象

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>float</title>

    <style>

        .per{

            width: 500px;

            height: auto;

            border: 1px solid #000;

        }

        .test{

            width: 100px;

            height: 30px;

            float: left;

            background: red;

            border: 1px solid #FFF;

        }

        .clear{

            clear: both;

        }

    </style>

</head>

<body>

    <div class="per">

        <div class="test"></div>

        <div class="test"></div>

        <div class="test"></div>

       <div class="test"></div>

        <div class="test"></div>

        <div class="test"></div>

       <div class="test"></div>

        <div class="test"></div>

        <div class="test"></div>

        <div class="clear"></div>

    </div>

</body>

</html>

受影响的元素不改变，你浮动就浮动呗。

给父元素添加overflow属性并结合zoom:1使用解决塌陷问题

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>float</title>

    <style>

        .per{

            width: 500px;

            height: auto;

            border: 1px solid #000;

            overflow: hidden;

            zoom:1;

        }

        .test{

            width: 1000px;

            height: 30px;

            background: red;

            border: 1px solid #FFF;

            float: left;

        }

    </style>

</head>

<body>

    <div class="per">

        <div class="test"></div>

        <div class="test"></div>

        <div class="test"></div>

        <div class="test"></div>

        <div class="test"></div>

    </div>

</body>

</html>

overflow也可以处理溢出问题子元素超了父元素很多超的截取

zoom IE的专用属性

子元素的高度放大缩小父元素的高度

两个一起解决兼容问题

但也不好会截断子元素

给父元素添加浮动

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>float</title>

    <style>

        .per{

            width: 500px;

            height: auto;

            border: 1px solid #000;

            float: left;

        }

        .test{

            width: 100px;

            height: 40px;

            background: red;

            border: 1px solid #FFF;

            float: left;

        }

        .bro{

            width: 100px;

            height: 100px;

            background: blue;

        }

    </style>

</head>

<body>

    <div class="per">

        <div class="test"></div>

        <div class="test"></div>

        <div class="test"></div>

        <div class="test"></div>

        <div class="test"></div>

    </div>

    <div class="bro"></div>

</body>

</html>

以毒攻毒，子元素浮动那我父元素也来浮动，塌陷撑开

但父元素好了其他元素还是异常，比如这个<div class="bro"></div> 还是考虑之前的，那怎么办呢》

其他元素加clear

比较好的解决方法（给父元素添加浮动，其他元素加clear ）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>float</title>

    <style>

        .per{

            width: 500px;

            height: auto;

            border: 1px solid #000;

            float: left;

        }

        .test{

            width: 100px;

            height: 40px;

            background: red;

            border: 1px solid #FFF;

            float: left;

        }

        .bro{

            width: 100px;

            height: 100px;

            background: blue;

            clear: both;

        }

    </style>

</head>

<body>

    <div class="per">

        <div class="test"></div>

        <div class="test"></div>

        <div class="test"></div>

        <div class="test"></div>

        <div class="test"></div>

    </div>

    <div class="bro"></div>

</body>

</html>

完美解决

那我以后就选（给父元素添加浮动，其他元素加clear ）

5、实际应用导航效果

实战实现慕课网的导航效果

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>float</title>

    <style>

        *{

            padding: 0;

            margin: 0;

        }

        .head{

            width: 100%;

            height: 64px;

        }

        .logo{

            width: 160px;

            height: 40px;

            float: left;

        }

        .nav{

            width: 320px;

            height: 64px;

            float: left;

        }

        .nav-li{

            width: 80px;

            height: 64px;

            text-align: center;

            line-height: 64px;

            color: #333;

            float: left;

        }

        .icons{

            width: 320px;

            height: 64px;

            float: right;

        }

        .i01{

            width: 64px;

            height: 64px;

            float: left;

            background: url("001.png") center center no-repeat;

        }

        .i02{

            width: 64px;

            height: 64px;

            float: left;

            background: url("002.png") center center no-repeat;

        }

        .i03{

            width: 64px;

            height: 64px;

            float: left;

            background: url("003.png") center center no-repeat;

        }

        .i04{

            width: 64px;

            height: 64px;

            float: left;

            background: url("004.png") center center no-repeat;

        }

        .i05{

            width: 64px;

            height: 64px;

            float: left;

            background: url("005.png") center center no-repeat;

        }

    </style>

</head>

<body>

    <div class="head">

        <div class="logo">

            <img src="logo.png" width="160" height="40" alt="">

        </div>

        <div class="nav">

            <div class="nav-li">实战</div>

            <div class="nav-li">路径</div>

            <div class="nav-li">猿问</div>

            <div class="nav-li">手记</div>

        </div>

        <div class="icons">

            <div class="i01"></div>

            <div class="i02"></div>

            <div class="i03"></div>

            <div class="i04"></div>

            <div class="i05"></div>

        </div>

    </div>

</body>

</html>

好了 float浮动

【Web】CSS中的浮动float的更多相关文章

如何理解CSS中的浮动：其实他就像乘坐扶梯一样
只要你用过自动扶梯,你就能很快的理解CSS中的浮动(Float). 你肯定遇到过这样的情况: 做好了,你想用CSS浮动来调整元素间的位置关系. 在写完代码之后,你发现浮动元素没出现在你设想 ...
CSS 中，用 float 和 position 的区别是什么？
CSS 中,用 float 和 position 的区别是什么? 呃,其实这个命题有误,只有position才是定位,float不能说是定位,不过你可以说这两种布局方式有什么不同.float和posi ...
CSS中的浮动和定位
在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性标准流的默认特性 1.分行.块级元素,并且能够dispay转换. 2.块级元素(block):默认独占一行,不能并列显示,能够设 ...
css中的浮动以及清除浮动
对于css中的浮动问题,曾经有一段时间我是懵懵懂懂的感觉,对于float这个属性一直是似懂非懂的赶脚,对于这种让我们一直懵懵懂懂的知识点,我们就需要找个时间点,仔仔细细的去将它搞懂,从这个过程中我们也 ...
【转】CSS中的浮动和清除浮动
以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目 ...
详细解读css中的浮动以及清除浮动的方法
对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家. 导读: 1.css块级元素讲解 2.css中浮动是如何产生的 3.出现浮动后,如何清除浮 ...
css3-9 css中的浮动怎么使用
css3-9 css中的浮动怎么使用一.总结一句话总结:用来做一般的行效果,比如说手机左右分布的头部导航栏.浮动的东西放到一个div中去,里面的内容根据需求左浮动或者右浮动,然后记得加上清除浮动. ...
CSS学习系列4 -- 再说CSS中的浮动运用及clear:left/right实际用法
在 CSS学习系列2 -- CSS中的清除浮动中,我们详细说了CSS中清除浮动的方法及使用后来我自己在项目开发一个需要使用浮动的网页时,进行了实际运用,加上后来看到一篇好文章.所以就在这里再次写篇 ...
css 中的浮动
css中浮动的作用: 使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”. css中浮动的特点: 1)改变元素类型,使元素支持宽高: 2)半脱离文档流: 3)文本环绕: 4)顶对齐 ...

随机推荐

MySQL锁：03.InnoDB行锁
目录 InnoDB 行锁锁排查可以用的视图和数据字典 InnoDB 行锁兼容性 InnoDB行锁之共享锁共享锁: 查看InnoDB锁 InnoDB行锁实现机制对普通索引上锁 InnoDB隐式.显 ...
全能扫描王(一款识别率超高的OCR识别APP)
前言无论是在工作还是日常生活中,我们都会经常遇到,需要将一些纸质资料上的文字内容变成电子文档进行编辑.这个时候就需要拥有一款好用的手机扫描+OCR文字识别功能的应用了. 随着人工智能的兴起,我们都在 ...
面试官问我:Object o = new Object() 占用了多少个字节？
小小面试一下前言蜜语最近马师傅火的不要不要的,虽然没有抢到耗子尾汁的商标注册权,但是必须得蹭一波马师傅的热度,下面就是闪电五连鞭的教学环节,你准备好了吗! 在正式内容开始前先甩两篇关于类加载机制和 ...
gcc编译阶段打印宏定义的内容
背景总所周知,代码量稍微大一点的C/C++项目的一些宏定义都会比较复杂,有时候会嵌套多个#if/#else判断分支和一堆#ifdef/#undef让你单看代码的话很难判断出宏定义的具体内容. 如果有 ...
10 个 GitHub 上超火的 CSS 奇技淫巧项目，找到写 CSS 的灵感！
大家好,我是你们的超级猫,一个不喜欢吃鱼.又不喜欢喵的超级猫 ~ 如果 CSS 是女孩子,肯定如上图那样吧
C#中的深度学习（三）：理解神经网络结构
在这篇文章中,我们将回顾监督机器学习的基础知识,以及训练和验证阶段包括哪些内容. 在这里,我们将为不了解AI的读者介绍机器学习(ML)的基础知识,并且我们将描述在监督机器学习模型中的训练和验证步骤. ...
一.C语言概述
C语言的起源贝尔实验室的Dennis Ritchie在1972年开发了C,当时他正与ken Thompson一起设计UNIX操作系统,然而,C并不是完全由Ritchie构想出来的.它来自Thomps ...
找到数组中最小的k个数
/*输入整数数组 arr ,找出其中最小的 k 个数.例如,输入4.5.1.6.2.7.3.8这8个数字, 则最小的4个数字是1.2.3.4. 示例 1: 输入:arr = [3,2,1], k = ...
连接数据库查询将查询结果写入exce文件中
package com.cn.peitest.connectDatabase; import java.io.File; import java.lang.reflect.Field; import ...
[LeetCode]160. Intersection of Two Linked Lists判断交叉链表的交点
方法要记住,和判断是不是交叉链表不一样方法是将两条链表的路径合并,两个指针分别从a和b走不同路线会在交点处相遇 public ListNode getIntersectionNode(ListNod ...

【Web】CSS中的浮动float