整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
我们知道css中最重要的就是浮动了，一张网页结构布局，用的最多的就是浮动了，现在大多数的网站网页结构都是浮动布局了，不像早些年的表格布局。所以学好浮动对我们的开发很重要。
浮动是什么？可能很多人的理解都不一样，我们来看看w3c对浮动的解释是什么
大多数小伙伴听得最多的可能就是浮动流，下面我们就来讲讲什么是浮动流以及清除浮动。
首先，我们知道，在一张网页中的正常布局流向（排列方式）都是从左到右，从上到下的方式排列。这个我们称之为标准文档流。那什么是浮动流呢？
浮动浮动浮动==> 因为有个浮字，我们可以理解为浮起来了一样。就好比标准文档流在地下排流，浮动流在天空上排流。简单看个例子。
这是两个正常排列的div，div独占一行，就不用多说了吧。然后我们给小的方块加一个浮动
然后我们再看效果
然后我们就看到大方块在小方块下面，因为小方块跑天上去了，它就不占据原来的位置，会把那个位置空出来，所以大方块会窜上去，就看起来两个方块重叠了。
在看另外一个例子，子级浮动，父级高度撑不开的问题，这也是浮动带来的一个不好的影响，平常写代码的时候会经常遇到这个。
一个ul标签，下面两个li标签，然后给ul加一个边框 便于观看。
保存运行看下正常效果
然后我们给li标签浮动
效果如下
这下我们看到ul的高度没有了，上下边框紧紧挨着，这就是刚刚上面说的浮起来的状况，因为子级li标签浮动起来了，它不占据原来的位置，它已经在天上了，所以它的父级ul标签包不住它，撑不起来高度，才会产生这种状况。
那我们要怎么解决这种现象呢。就是清除浮动。
大致分为4种方案：
1、在并列的子元素，最后加一个元素，给他加clear：both
2、给父子加一个class： clearfix
.clearfix::after{
content: '';
clear: both;
display: block;
}
3、让父级触发BFC效果
position:absolute
display:inline-block
float：left|right
overflow：hidden
4、如何浮动的父级本身就是浮动元素吗，那么不用清除浮动了
咱们就来给父级触发BFC效果看一下。
看效果
现在父级就把子级包裹住了，高度也有了。
有什么问题可以点一下关注，私信小编。
五节页面布局-浮动。
这一节说一下页面布局浮动。浮动的属性是float，它的只有 left，向左浮动，向右浮动。还有 no，就是不浮动，就是不给它这个属性，也是no。然后css是继承元素的浮动元素是什么？还有 clear 属性，就是清除元素周围的浮动。看一下代码，上一节的这些属性都删一下，刷新一下。
现在是有两div，就是两个div，一个是第三页网页，一个是第四个玩意，浮动属性。第一个div，向左浮动。第二个div，给它一个float right，向右浮动。看一下效果，这边都给了宽，都是300p 叉，然后刷新。刷新，没有保存，保存一下。
刷新，你看，我的第三个网页在左边，第四个网页在右边，它就是 float。左边float 右边，跟两个纸箱子是一样的。它的盒子模型，一个盒子在左边，一个盒子在右边，给它宽大一点。就比如说，我这盒子很大，六百劈叉，你看，它就跟地面似的。第一层只能乘乘六百，乘不了两个就会在第二层出现。
再给乘三百，然后都 float left，看一下刷新。看，它就并排的都朝着左边，然后这样一个一个地放，就跟码快递箱子一样，可以这样。
可想，再看一下 clear，属性 clear 属性，就是清除浮动元素。给它第二个div，给它一个 clear left，就是它左边的浮动清除掉。看一下效果，保存，保存之后刷新一下，看，它就没有了浮动效果。浮动看着很简单，但是用的时候还是挺多的，尤其是布局的时候。好了，就这样，拜拜。感谢观看。
使用css布局当中，经常会用到使用浮动布局，但是浮动之后元素就会产生脱离文档流而浮动在页面上，导致父亲节点感应不到页面的高度产生高度坍塌而让后续的子节点被浮动的节点遮盖，这时就需要使用清除浮动让节点感应到浮动节点的高度方便布局。
在清除浮动中可以使用一下发放实现清除浮动
在清除浮动中常用的就是使用clear:both清除两边的浮动效果。这个可以使用增加div节点的方式实现。
也可是使用bootstrap使用的清除浮动的方式，使用after和before的伪类来实现清除浮动
清除浮动主要的目的就是让父亲节点感应到浮动子节点的高度，可以使用overflow：hidden来让父亲节点感应到子节点高度，当然这样的使用方法会让本来要不使用此属性的节点产生超出部分隐藏，这个需要注意。
bootstrap使用的清除浮动less
在实现浮动中，如果一个节点浮动，另外一个节点不浮动，那么没有浮动的节点中的内容使用bootstap清除浮动，感应到的就是浮动节点的高度导致产生不必要的麻烦。
css代码：
.clearfix:after{
content: " ";
display: table;
}
.clearfix:bofore{
content: " ";
display: table;
}
.clearfix:after{
clear: both;
}
#nav{
float: left;
width: 100px;
height:300px;
background-color: red;
position: relative;
}
.content{
height: 600px;
margin-left: 100px;
background-color: green;
}
.inner{
background-color: #fff;
color: #ff4500;
}
.inner p{
box-sizing: boder-box;
-webkit-box-sizing: border-box;
width: 50%;
text-align: center;
float: left;
background-color: #cecece;
padding: 10px 0;
}
.last{
border-left: 1px solid #dcdcdc;
}
菜单浮动其他不浮动导致的bug
在没有浮动的节点中清楚浮动
*请认真填写需求信息，我们会在24小时内与您取得联系。
