前端 css

浮动 四大特性

1 浮动的元素脱标

脱标就是脱离了标准文档流

     <div class="box1">小红</div>
     <div class="box2">小黄</div>
     <span>小马哥</span>
     <span>小马哥</span>




.box1{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        
        }
        .box2{
            width: 400px;
            height: 400px;
            background-color: yellow;
        
        }
        span{
            background-color: green;
            float: left;
            width: 300px;
            height: 50px;
        }

 效果:红色的盒子盖住了黄色的盒子,行内的span标签可以设置宽高了.

原因:小红设置了浮动,小黄没有设置浮动,小红脱离了标准文档流,其实就是他不在页面中占位置了,此时浏览器默认为小黄是标准文档流中额第一个盒子,所以就渲染到页面中的第一个位置,这种现象,也有一种叫法,浮动元素飘起来了

原因2:所有标签一旦设置浮动,就能够并排,并且不区分行内,快状元素,都能设置宽高

2 浮动的元素互相贴靠

 html结构

<div class="box1">1</div>
  <div class="box2">2</div>
  <div class="box3">3</div>



css样式
.box1{
            width: 100px;
            height: 400px;
            float: left;
            background-color: red;
        }
        .box2{
            width: 150px;       
            height: 450px;
            float: left;
            background-color: yellow;
        }
        .box3{
            width: 300px;
            height: 300px;
            float: left;
            background-color: green;
        }

效果发现:

如果父元素有足够的空间,那么在一行会并排显示,

如果没有足够空间,那么就会靠着1哥 ,如果在没有足够的空间自己贴着边

3 浮动的元素由'字围'效果

效果发现:所谓字围效果,当div浮动,p不浮动,div遮盖住p,div的层级提高,但是p中的文字不会被遮盖,此时形成了字围效果

4收缩的效果

收缩:一个浮动元素,如果没有设置width,那么就自动收缩为文字的宽度(这点跟行内元素很像)

关于浮动,一定要遵循一个原则,永远不是一个盒子单独移动,要浮动就一起浮动,有浮动就一定要清除浮动.

为什么要清除浮动?

浮动带来的问题,子盒子浮动,不在页面占位置,如果父盒子不设置高度,子盒子撑不起父盒子的高度

页面会出现紊乱

清除浮动的方式:

1 给父盒子设置固定高度(后期不好维护)

一般会常用页面中固定高度的并且子元素,并排显示的布局,比如导航栏

2 clear:both

给浮动的元素后加一个空的div,并且该元素不浮动,然后设置clear:both

html结构

<div>
        <ul>
            <li>Python</li>
            <li>web</li>
            <li>linux</li>
            <!-- 给浮动元素最后面加一个空的div 并且该元素不浮动 ，然后设置clear:both  清除别人对我的浮动影响-->
            <!-- 内墙法 -->
            <!-- 无缘无故加了div元素  结构冗余 -->
            <div class="clear"></div>
            
        </ul>
        
</div>
<div class="box">
        
</div>

css样式
*{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        
        }


        div{
            width: 400px;
        
        }
        

        div ul li {
            float: left;
            width: 100px;
            height: 40px;
            background-color: red;
        }
        .box{
            width: 200px;
            height: 100px;
            background-color: yellow;
        }
        .clear{
            clear: both;
        }

3 伪元素清除法

给浮动子元素的父盒子,也就是不浮动元素,添加一个clearfix的类然后设置

.clearfix:after{
    /*必须要写的三句话*/
    content: '.';
    clear:both;
    display: block;
    height: 0;
    visibility: hidden;
}

4 overflow:hidden