前端学习（100）：float注意点整理1

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>float浮动</title><style>body{border:1px solid red}#box1{width: 100px;height: 100px;background: yellow;}#box2{width: 200px;height: 200px;background: red;float: left;}#box3{width: 300px;height: 300px;background: black;}</style>
</head>
<body><div id="box1"></div><div id="box2"></div><div id="box3"></div>
</body>
</html>

运行结果

内容保存为两层

<!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>float浮动</title><style>body{border:1px solid red}#box1{width: 100px;height: 100px;background: yellow;}#box2{width: 200px;height: 200px;background: red;float: left;}#box3{width: 300px;height: 300px;background: black;}</style>
</head>
<body><div id="box1"></div><div id="box2"></div><div id="box3">文字文字文字文字文字文字文字</div>
</body>
</html>

运行结果

默认宽根据内容决定

换行排序

前端学习（100）：float注意点整理1相关推荐

[前端学习笔记] jQuery基础知识整理
一.jQuery基本概念 1. 什么是jQuery jQuery是一个快速简洁的JS库,封装了JS常用的功能代码,优化了DOM操作.事件处理.动画设计.Ajax交互等.我们可以快速查询使用里面的功能函 ...
前端学习资料网址收集整理
前端学习资料整理:百度cdn,jquery插件网站收集,html5资料整理等.方便查阅. A:基础知识,行业动态 http://www.51cto.com 51cto http://www.html5 ...
【春招实习秋招】前端学习の优质资料整理心路历程（已上岸）
引言写这篇博客原因我就简单谈谈我为什么要整理这份学习资料吧,首先,春招遗憾没有上岸,可以说没抓住机遇,准备也不够好,但我努力的轨迹还在,运气或许没到,但我坚持下来的勇气一直都在!每一份坚持都是成功 ...
2020前端学习路线收集整理
本人18年毕业,刚毕业自学Java,第一份工作因部门解散,时效半年,其实那时我一直在想往前端发展,恰巧拿到下家offer,第二份工作确实是前端,不过是客户是银行,样式全部统一,与我想象的色彩缤纷的前端 ...
WEB前端学习论坛整理
WEB前端学习的知名论坛: 一.官方论坛 W3C: http://www.w3.org/ ECMA:http://www.ecmascript.org/ Mozilla:https://develop ...
「 30天整理｜2W字长篇」用一篇文章明确前端学习路线并构筑知识体系
知识体系写作背景回顾我的前端学习之路随便玩玩摸爬滚打自主学习我的学习经验总结你处于哪个阶段呢迷茫期广度扩展深度沉淀写在本章结尾献给新人们的学习路线 IDE篇 sublime w ...
22届校招生精心整理——前端学习路线(超详细)
大家好,我是小庄,一个22届校招生,同时也是一个专心于互联网技术的深漂打工人. 众所周知,前端现在变化很快,框架更新速度非常迅速. 那么目前,如果作为一个完全没有接触过前端的小白,应该从哪里开始学习前 ...
前端开发面试题及答案整理
前端开发面试题及答案整理文章目录一些开放性题目 position的值, relative和absolute分别是相对于谁进行定位的? 如何解决跨域问题 XML和JSON的区别? 谈谈你对webpa ...
Web 前端学习之js概述
Web 前端学习之js概述 1.JavaScript 介绍 Javascript 语言诞生主要是完成页面的数据验证.因此它运行在客户端,需要运行浏览器来解析执行JavaScript 代码. JS 是 ...
顾川的前端学习笔记--前端开发基础
阶段一前端开发基础初始HTML 本阶段重难点 3.29小时40小节4个模块 CSS选择器盒模型 CSS三大特性浮动和清楚浮动 CSS四种定位 CSS进阶 CSS3 前端工程师需要会的PS取图案 ...

前端学习（100）：float注意点整理1

前端学习（100）：float注意点整理1相关推荐

最新文章

热门文章