搜索
首页web前端js教程css float的详细讲解(附实例)

css float的详细讲解(附实例)

Oct 16, 2018 pm 03:36 PM
html5javascript

本篇文章给大家带来的内容是关于css float的详细讲解(附实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

div+css布局,是前端开发人员的核心技能,在工作中占很大的比重。良好的前端布局是进行javascript书写和互的基础,足见布局的重要性,今天我们就讲讲css布局的基石-float。可以说,没有浮动,就谈不上布局了。

1、float的产生

互联网产生从一开始到日渐壮大,期间借鉴了大量印刷排版的理念和技术,比如一开始互联网的发明,就是将文档电子化互相链接。

而后的table布局的发明,也是印刷专家完成的,直到css出现,依然可以看到印刷的影子,当然这也无可厚非,比如float的出现就是为了应对图文并茂的排版出现的。

下面传统的印刷排版常见的布局-文字环绕,就是float的常见应用场景之一。

2138131329-5bc552b006702_articlex.png

我们看看如何实现,

<!DOCTYPE html>
<html>

<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>JS暗黑编年史</title>
    <style>
        img{
            float:left;
        }
    </style>
</head>

<body>
    <p>
        <img src="https://jetorz.github.io/assets/Brendan-Eich.jpg" alt="" width="200">
        在一个一个炎热的下午,大家注意,一定要是炎热的下午,为什么要是炎热的下午呢,因为天气一热,人就容易烦躁,人一烦躁就不想工作,不工作就想看片儿(注意看片儿不是看电影),但是你知道的越看片儿越烦躁,正在这个时候老板娘进来来了,对js的作者布莱登·艾克说,小艾啊你看我们用猫上网的时候用户名密码填错了结果等一两分钟返回结果的时候才知道是错了,你看你能不能搞一个程序让我在请求之前就知道我写错了,其实小艾心里不想搞,但是大家都懂的,老板好拒绝,老板娘的需求是不好拒绝的,所以布莱登艾克心想赶紧随便糊弄一下算了,片儿还没看完呢,所以他就用了8天半(官方说)10天,其实另外的一天半被他用来看片儿了。大家懂的,你看片儿的时候有心思写代码吗?所以js的bug如山一样多,这个我们以后说。
    </p>
</body>
</html>

2.float的经典场景

除了上面的经典用法之外,float还有几个更复杂也更通用的场景,首先是整站布局。

434966047-5bc5530017602_articlex.png

代码如下,

<!DOCTYPE html>
<html>

<head>
    <style>
        #header {
            background-color: black;
            color: white;
            text-align: center;
            padding: 5px;
        }

        #nav {
            line-height: 30px;
            background-color: #eeeeee;
            height: 300px;
            width: 100px;
            float: left;
            padding: 5px;
        }

        #section {
            width: 350px;
            float: left;
            padding: 10px;
        }

        #footer {
            background-color: black;
            color: white;
            clear: both;
            text-align: center;
            padding: 5px;
        }
    </style>
</head>

<body>

    <div id="header">
        <h1>我是头部</h1>
    </div>

    <div id="nav">
        html教程<br>
        css教程<br>
        js教程<br>
    </div>

    <div id="section">
        <h2>js暗黑编年史</h2>
        <p>
            在一个一个炎热的下午,大家注意,一定要是炎热的下午,为什么要是炎热的下午呢,因为天气一热,人就容易烦躁,人一烦躁就不想工作,不工作就想看片儿(注意看片儿不是看电影),但是你知道的越看片儿越烦躁,正在这个时候老板娘进来来了,对js的作者布莱登·艾克说,小艾啊你看我们用猫上网的时候用户名密码填错了结果等一两分钟返回结果的时候才知道是错了,你看你能不能搞一个程序.
        </p>
       
    </div>

    <div id="footer">
        我是footer
    </div>
</body>
</html>

还有类似淘宝的商品布局也很普遍,

464019908-5bc5532c3ec33_articlex.png

实现代码如下,

<!DOCTYPE html>
<html>
<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>
        #div2{
            background: red;
            margin-right: 10px;
            height: 300px;
        }
        #div3{
            padding: 5px;
        }
        #div2,#div3{
            float: left;
            width:300px;
           
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">

        </div>
        <div id="div3">
            <h3>我是标题</h3>
            <p>我是一段描述的文字我是一段描述的文字我是一段描述的文字我是一段描述的文字</p>
        </div>
    </div>
</body>
</html>

3.float的常见问题

1.宽度不够,会挤下来

<!DOCTYPE html>
<html>
<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>
        #wrap{
            width:1000px;
            margin: 0 auto;
        }
        div{
            border:5px solid #000;
        }
        #left{
            width:200px;
            background:red;
            height: 300px;
            float: left;
        }
        #right{
            width:800px;
            background:green;
            height: 300px;
            float: left;

        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="left">左侧</div>
        <div id="right">右侧</div>
    </div>
</body>
</html>

解决:

<!DOCTYPE html>
<html>
<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>
        #wrap{
            width:1000px;
            margin: 0 auto;
            border:5px solid yellow;
        }
        div{
            border:5px solid #000;
        }
        #left{
            width:200px;
            background:red;
            height: 300px;
            float: left;
            box-sizing: border-box;
        }
        #right{
            width:800px;
            background:green;
            height: 300px;
            float: left;
            box-sizing: border-box;
            }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="left">左侧</div>
        <div id="right">右侧</div>
    </div>
</body>
</html>

如图所示,大家会发现其实外层div的高度没有撑开,这里我不想解释原因,扯什么BFC啦,文档流啦,为什么?

编程就像学习骑自行车,你看过别人怎么骑车,也知道踏板是用来蹬的,车座是用来座的,车把是用来掌握方向就够了,你没必要从一开始研究:

山地车30速对应的是:这个山地车的变速套件是由3片式牙盘和10片式飞轮组成,可以变换30种传动比,也就是齿比。详细的解释是:前面牙盘有三个盘,后面飞轮有10个,3x10就是30速,如果后面有9个飞轮就是27速,速别就是前面的盘的数量乘后面轮的数量,一般情况下前面都是三个盘,主要差距在于后面的小飞轮,常见的速别有18、21、24、27、30。

毕竟你不可能一开始学骑车就想着将来成为秋名山车神。

即使你学会这些,对于你学习骑车没有什么帮助,就像你即使知道了高度没有撑起来是因为没有触发BFC,就算是你知道了文档流和常规流,知道了float的默认值是none,对于你能流畅的布局有多少帮助呢?

我不是否认这些知识的价值,是要让你懂得轻重缓急。毕竟如果你连最基础的float布局都写得磕磕绊绊,你研究那些有什么意义呢?先把典型的布局记住,学会,用熟,然后再聊其他的。继续第二个问题,

2.高度不够,直接一句话,记住就好

<!DOCTYPE html>
<html>
<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>
        #wrap{
            width:1000px;
            margin: 0 auto;
            border:5px solid yellow;
            overflow: hidden;
        }
        div{
            border:5px solid #000;
        }
        #left{
            width:200px;
            background:red;
            height: 300px;
            float: left;
            box-sizing: border-box;
        }
        #right{
            width:800px;
            background:green;
            height: 300px;
            float: left;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="left">左侧</div>
        <div id="right">右侧</div>
    </div>
</body>
</html>

其实就一句话,

overflow: hidden;

先记住就好,等你长大了就明白了。

说第三个问题,

明显footer位置不对,这是一个特性,float后面的元素会自动跟随,并尽量靠上靠左。问题是明显footer是不愿意跟着右侧元素混的,他应该在下面。咋弄?清除浮动。

<!DOCTYPE html>
<html>

<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>
        #wrap {
            width: 1000px;
            margin: 0 auto;
            border: 5px solid yellow;
            overflow: hidden;
        }

        div {
            border: 5px solid #000;
        }

        .main {
            border: 0;
        }

        #left {
            width: 200px;
            background: red;
            height: 400px;
            float: left;
            box-sizing: border-box;
        }

        #right {
            width: 800px;
            background: green;
            height: 200px;
            float: left;
            box-sizing: border-box;
        }

        .clearFix:after {
            content: '';
            display: block;
            clear: both;
        }

        .clearFix {
            zoom: 1;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <div class="main clearFix">
            <div id="left">左侧</div>
            <div id="right">右侧</div>
        </div>

        <div id="footer">我是帅气的footer</div>
    </div>
</body>

</html>

注意,这里在left和right外面包了一层div,然后添加了class

        .clearFix:after {
            content: '';
            display: block;
            clear: both;
        }

        .clearFix {
            zoom: 1;
        }

这里你不会都没关系,先记住会用就好。记住代码就像骑自行车,骑得多了自然就知道怎么骑了,熟练了以后再去骑山地车,公路车,入门就会很快。

以上是css float的详细讲解(附实例)的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文转载于:segmentfault思否。如有侵权,请联系admin@php.cn删除
JavaScript的角色:使网络交互和动态JavaScript的角色:使网络交互和动态Apr 24, 2025 am 12:12 AM

JavaScript是现代网站的核心,因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容,2)通过DOMAPI操作网页,3)支持复杂的交互效果如动画和拖放,4)优化性能和最佳实践提高用户体验。

C和JavaScript:连接解释C和JavaScript:连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1)C 代码编译成WebAssembly模块,引入到JavaScript环境中,增强计算能力。2)在游戏开发中,C 处理物理引擎和图形渲染,JavaScript负责游戏逻辑和用户界面。

从网站到应用程序:JavaScript的不同应用从网站到应用程序:JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中,JavaScript与HTML、CSS一起操作DOM,实现动态效果,并支持如jQuery、React等框架。2)通过ReactNative和Ionic,JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行,支持高并发请求。

Python vs. JavaScript:比较用例和应用程序Python vs. JavaScript:比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化,JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色,使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺,用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用,支持全栈开发。

C/C在JavaScript口译员和编译器中的作用C/C在JavaScript口译员和编译器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色,主要用于实现解释器和JIT编译器。 1)C 用于解析JavaScript源码并生成抽象语法树。 2)C 负责生成和执行字节码。 3)C 实现JIT编译器,在运行时优化和编译热点代码,显着提高JavaScript的执行效率。

JavaScript在行动中:现实世界中的示例和项目JavaScript在行动中:现实世界中的示例和项目Apr 19, 2025 am 12:13 AM

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用,涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

JavaScript和Web:核心功能和用例JavaScript和Web:核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互;2)在用户提交数据前进行客户端验证,提高用户体验;3)通过AJAX技术实现与服务器的无刷新通信。

了解JavaScript引擎:实施详细信息了解JavaScript引擎:实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要,因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段;2)执行过程中,引擎会进行动态优化,如内联缓存和隐藏类;3)最佳实践包括避免全局变量、优化循环、使用const和let,以及避免过度使用闭包。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能