浮动布局详解
前言：
用于书写页面的布局有很多种，比如三栏，两栏布局，栅格布局，弹性布局，百分比布局，等等。。
今天我们主要来探讨一下老牌布局 浮动布局。
思考：
为什么要使用浮动布局?
回想，我们默认情况下，能设置宽高的元素是不是只能纵向排列?
举个小栗子：
OK，出现这种情况的原因我们都知道，是因为块级元素的特性导致的，但是往往我们的需求都是需要，并排显示，并且可以设置宽高，所以这个时候就需要用到浮动，来解决这个问题。
首先：了解浮动语法。
给上面的小栗子添加浮动!
我们刚刚，给元素设置了左浮动，初步达到了我们的预期==》元素横向排列。但是有的同学会有疑问，左浮动，和右浮动会有什么区别呢?OK，我们现在一起来看一下。
很好，元素统一设置左浮动，或者统一设置右浮动，我们都已经看到区别了，那问题又来了，一个左浮动一个右浮动，元素又会是怎样排列的呢?我们一起来试一下!
好，以上我们把左右浮动属性都尝试了一遍，但是聪明的小伙伴会发现，两个div都设置了浮动属性，那么问题来了，能不能只设置一个呢?
想法很好，但是先记住一句话，'子元素要浮动，一窝都浮动'，什么意思呢，
解释：
黑色框是父元素，无论父元素里面有多少个子元素，注意，这个子元素是直接子元素不包含后代元素，只要想横着排列，所有子元素都要设置浮动属性，不管是左右，都行。
那么我们现在来看一下，如果不是全部都设置浮动是什么情况?
猜你喜欢LIKE
相关推荐HOT
更多>>
算法评测标准---空间复杂度是什么？
算法评测标准---空间复杂度是什么？空间复杂度是什么？一. 空间复杂度的概念，复杂度(Space Complexity)，是对一个算法在运行过程中临时占用存...详情>>
2023-03-23 20:15:04
怎么用css画三角形？
怎么用css画三角形？border这里的像素值 和 border-left这里的像素值可以是不一样的,也可以是一样的,根据三角形的形状来进行具体设置值即可，要...详情>>
2023-03-23 15:27:16
Maven集成 tomcat插件及使用教程
在实际的项目开发中，特别是分布式项目，往往有N多个子项目需要同时启动测试。这样多个项目引用tomcat插件，配置不同的端口，就可以同时启动N个...详情>>
2023-02-23 14:44:00
扫盲CSS中常见的单位
Px是pixel的简写, 被称之为像素单位, px可以在计算机屏幕上，能达到预期的效果，在打印机和其它的高分辨率设备上，它又能取得所希望的效果, 一...详情>>
2023-02-16 13:47:00热门推荐
java变量的作用域是什么？
沸什么是Java循环？
热switch语句的case和default有顺序吗?
热SpringBoot中使用redis 新手入门
新vue的watch和computed的区别以及特点是什么？
算法评测标准---空间复杂度是什么？
Spring整合Junit框架是什么？
break和continue必须要在循环中使用吗？
怎么用css画三角形？
手把手教你搭建Oauth2授权服务！
为什么不能用break？
什么是foreach循环？它有哪些优点和局限性？
react生命周期？16版本删除了什么钩子函数？为什么删除？
经典面试题：static加载机制你知道吗?
技术干货
京公网安备 11010802030320号