前端新手坑之float：left

相信很多刚学前端的同学们，都会遇到这样一个问题：我的背景（图片）怎么突然消失不见了，而且找不到原因。

float:left;(左浮动)他使得指定元素脱离普通的文档流而产生的特别的布局特性。并且FLOAT必需应用在块级元素之上

例子1代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Document</title><style type="text/css">.one{width: 400px;height: 400px;background: red;}.one div{float: left;}.one-l{width: 100px;height: 100px;background: pink;}.one-r{width: 200px;height: 200px;background: gray;}.clear{clear: both;}</style>
</head>
<body><div class="one"><div class="one-l"></div><div class="one-r"></div></div>
</body>
</html>

e.g.：one是父盒子，one-l、one-r是子盒子；

例子1：当父盒子有宽度和高度时，是能显示出来背景的，之后不论怎么使用float：left；都是不会造成背景丢失的；
（总结：当父盒子的背景丢失时，不妨先给父盒子加个高度和宽度，这是最简单粗暴的方法）

第一种情况：子盒子的宽度和高度小于父盒子的宽度和高度，背景能正常显示，子盒子都在父盒子中。

第二种情况：子盒子高度宽度大于父盒子的高度宽度时，父盒子的背景是能显示的，子盒子宽度超出父盒子。（我这边是将one-r宽度改成500px）

例子2代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Document</title><style type="text/css">.one{background: red;}.one div{float: left;}.one-l{width: 100px;height: 100px;background: pink;}.one-r{width: 500px;height: 200px;background: gray;}.clear{clear: both;}</style>
</head>
<body><div class="one"><div class="one-l"></div><div class="one-r"></div><div class="clear" style="float:none;"></div></div>
</body>
</html>

例子2：父盒子都没有宽度和高度，当父盒子没有宽度和高度时，它是靠子盒子的宽高来撑开的，所以说当你子盒子的float状态下的话，子盒子现在是浮动状态（你可以想象成子盒子现在的漂浮在父盒子上，父盒子被压在子盒子底下）现在的父盒子没有被子盒子撑开，父盒子没有宽和高。
（总结：可以在父盒子下加个<div class=“clear” style=“float:none;”></div>，用clear：both清除浮动）

第一种情况：可以看到，背景是没有显示出红色的；

第二种情况：加入clear：both；清除浮动，可以看到如下效果。浮动被清除，父盒子有了高度被撑开，而因为div是块元素，它占据的是一整行。

如果不想父盒子占据一整行，可以给父盒子加个宽度。

前端新手坑之float：left相关推荐

css响应式布局_Web前端新手怎么入门如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
window safari 怎么进入响应式_Web前端新手怎么入门如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
（vant新手坑）引入Vant组件并改变其样式
遇到的问题在使用tab组件的时候,要改变tab组件上的文字颜色和滚动条的颜色.这个官网是有接口的,就是这个color. Tabs API 参数说明类型默认值color 标签颜色 String ...
Vue React Angular之三国杀，web前端入坑第六篇上
「懒癌引发血案」目前前端技术栈发生了翻天覆地的变化,上篇刚写了只会jquery 要失业,再不学新的你就要被淘汰,虽然有点危言耸听,不过现实情况确实是这样. vue.react.angular对比 ...
web前端新手面试指南：自我介绍
web前端新手面试指南:自我介绍面试时注意:自我介绍不能太长,也不能过短,3分钟左右最合适,尤其做为web前端技术方面的面试,更加要说到点上,我依次从学习方面.项目实践.未来规划这三个方面写下web ...
Vue、React、Angular之三国杀，web前端入坑第六篇(上)
「懒癌引发血案」目前前端技术栈发生了翻天覆地的变化,上篇刚写了只会jquery 要失业,再不学新的你就要被淘汰,虽然有点危言耸听,不过现实情况确实是这样. vue.react.angular对比 ...
前端新手的初级前端面试学习笔记(有答案,有些我自己觉得可以)
文章目录 var和let const的区别那什么是变量提升? 作用域 2. typeof返回那些类型 undefined和null 什么时候使用null 3. 列举强制类型转换和隐式类型转换手写深 ...
一、前端入坑计划之NPM基础
一.前端入坑计划之NPM基础随着时代的发展,后端程序员已经越来越难在行业中混下去了.所以不得不开始制定对前端的学习计划,那么本章先从NPM开始学习吧! 1.为什么要先接触NPM 因为好用,因为大家都 ...
[适合前端新手vue项目]超级可爱的宠物APP
[适合前端新手项目]超级可爱的宠物APP > < 基于网上找的UI设计图,实现简单的移动端静态页面:利用VUE框架进行管理:Mock实现模拟数据:添加了token登录和注册功能本项目用到 ...

前端新手坑之float：left

前端新手坑之float：left相关推荐

最新文章

热门文章