16 浮动

Posted 2021-12-28 xuanjian-91

标准文档流，又叫普通流
      文档流的布局方式：从左到右，从上到下
            
脱标：
	什么叫脱离文档流？，浮动后的块状元素是行内元素吗？
	脱标是什么：
		元素脱标后，浮在标准流上层，后面的元素对象，就视它不存在
		注意，只有绝对定位absolute、浮动float、固定定位才会脱离文档流！	
	
	脱标后的，部分无视和完全无视的区别？
	部分无视：使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。
	完全无视：对于使用绝对定位脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

	如果对盒子没有指定宽高，那么盒子的宽高，由其子元素来撑开

	什么时候用内边距 什么时候用外边距
      绝大多数情况下可以混用，想用什么就用什么，但是总有一个
      最好用的，建议
          优先使用width （内容的宽度）> padding > margin
	   margin调整元素位置


三种布局  标准流  浮动  定位 

浮动 
 	为什么：
就是为了文字环绕，后来可以让块状元素并排
  	怎么浮动的： 
 float:left 或float:right
	浮动过程：
元素从当前位置为浮起来，离开原来的位置，左右浮动， 浮动元素的外边缘碰到包含框或另一个浮动元素的边框为止
 		   *****口诀：浮动，先浮后动；
   特点 ：
   1 浮动的元素脱离标准文档流，脱标后不占用文档空间，后面的盒子前移
          2 浮动的元素不能撑开父亲 ，宽度不够会把浮动元素往下挤，别卡住了 
          3、子盒子浮动 不会压住父盒子的padding和margin,只会在内容范围内浮动
          4、浮动元素改变元素的模式,无论行内元素还是块级元素 设置浮动后都具有行内块元素特性     
     
      * 竖直方向的margin塌陷现象消失
                只有标准流中才有margin塌陷情况
				
      * 字围现象
               图片和文字搭配的时候，图片浮动，文字不浮动，会造成字围现象


  * 清除浮动方法
      为什么要清除浮动？
         	浮动元素会对后面的元素有影响，后面的盒子会无视浮动的元素，会上移，对布局产生影响。为了不影响后面的元素，所以要求浮动的元素也要占用文档空间，所以要清除浮动
     1 给父亲增加高度(有高度的盒子可以关住浮动)-------不推荐
         缺点：实际工作中很少给父亲直接加高度，一般都是由儿子撑开
		并不能清除浮动对后面的影响，因为对父元素设置宽高，只是增加了父元素的宽高，看起来把父元素撑开了，实际没撑开，只是看上去好像撑开了。而且字环绕现象还是存在的。
         
     2 clear: both  
      		 clear: both的作用能清除之前的浮动元素对本元素的影响，也清除了浮动对它后面元素的影响
    		 
     3 隔墙
         外墙
               清除浮动元素后，浮动元素对本元素和后面元素没有影响了，但是浮动元素对他的父元素还是有影响的，因为父元素没有清除浮动，所以浮动元素撑不开父元素
         内墙
             内墙元素后面是父元素，所以清楚浮动后对父元素无影响，所以撑开了父元素
		把clear: both写在一块div中然后进行隔离 

     4 overflow:hidden
         解决方案 偏方，在父元素中增加 overflow:hidden
             overflow:hidden 本意 让多余的内容隐藏
      5、使用伪元素
             /*伪元素产出的是行内元素*/
	    .clearfix::after 
	    	content: "."; /*尽量加不要空 */
	    	display: block; /*转块元素*/
	    	clear: both; /*清除浮动*/
	    	height: 0;   /*高度为0*/
	    	visibility: hidden;/*隐藏盒子*/
	    
	    .clearfix 
	    	*zoom: 1; /* zoom是ie6 7 清除浮动用的属性 
	    	             *表示该属性只有ie6 7 识别
	    	         */
	    
          6、 v  双伪元素 （推荐使用）
          /* 推荐使用  代码简洁*/
        	    .clearfix:before, 
        	    .clearfix:after 
                   content: "";
                   display: table; /* 触发BFC BFC可以清除浮动*/   
        	    
        
        	    .clearfix:after 
        	    	clear: both;