还在为css浮动对页面布局带来的影响而烦恼吗？教你几招！

最新推荐文章于 2022-11-26 14:39:38 发布

慕有轶

最新推荐文章于 2022-11-26 14:39:38 发布

阅读量491

点赞数

文章标签： html html5 javascript css3 css

本文链接：https://blog.csdn.net/qq_42812107/article/details/103539593

版权

什么浮动？

选择器{float(浮动): 属性值 - left / right 、none 默认值}
元素的浮动是指设置了浮动属性的元素会脱离标准普通流，移动到其父元素的指定位置

为什么要清除浮动？

浮动的本质是用来做一些文字混排效果的，但是被我们拿来做布局用，则会有很多的问题出现，
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。
准确地说，并不是清除浮动，而是清除浮动后造成的影响

方法一：

<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="son3"></div>
<!--        在你想要清除浮动的元素后面 加一个空标签 给属性值 clear:both-->
        <div style="clear: both;"></div>
    </div>
    <div class="box"></div>
</body>

缺点：会多解析一个标签对性能有影响

方法二：

<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="son3"></div>
        <div style="clear: both;"></div>
    </div>
    <div class="box"></div>
</body>

.son1{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 1px solid black;
            float: left;
            /*清除两边浮动*/
            clear: both;
        }

方法三：

<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="son3"></div>
        <div style="clear: both;"></div>
    </div>
    <div class="box"></div>
</body>

.father{
            width: 500px;
            /*height: 500px;*/
            background-color: #1d90ff;
            /*在父元素的样式里面加上
			overflow: hidden;
			溢出隐藏*/
            overflow: hidden;
            /**zoom: 1;*/
        }

方法三：

<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="son3"></div>
        <div style="clear: both;"></div>
    </div>
    <div class="box"></div>
</body>

缺点：溢出的部分会隐藏，不利于后期的维护

.father:after{
			/*给父元素加伪元素选择器*/
            /*必须配合 content 设置空值*/
            content: ".";
            display: block;
            height: 0px;
            clear: both;
            visibility: hidden;
        }
        .father{
            width: 500px;
            /*height: 500px;*/
            background-color: #1d90ff;
            overflow: hidden;
            /*注意*/
            *zoom: 1;
        }