css浮动及其危害和解决方法

atinosun 发布于2019-08-30 15:55 / 980人阅读

摘要：元素向右浮动。元素不浮动，并会显示在其在文本中出现的位置。规定应该从父元素继承属性的值。

html元素有三种类型：

①、块状元素： 如div       --------        display：block  
②、内联元素： 如span      ------      display：inline  
③、内联块元素：如input    ----     display：inline-block

在标准流中，三种类型的元素呈现的方式不同
*display:block
元素会独占一行，多个block元素会各自新起一行
*inline 和 inline-block
元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行

如果想block元素像inline元素那些不会自动换行，可以用css的float属性（浮动）
left --------- 元素向左浮动。
right ------- 元素向右浮动。
none ------ 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit ---- 规定应该从父元素继承 float 属性的值。

虽然浮动很方便，但是也带来了一定的负面影响

浮动主要造成了父元素高度塌陷，以至于父元素很多像背景颜色，边框等都不能正确的显示出来以及同级子元素的位置

我们先来看一下正常的浮动效果

.parent{
    width: 300px;
    border: 3px solid black;
    background-color: yellow;
}
.child{
    width: 50px;
    height: 50px;
}
.child1{
    background-color: red;
    float: left;
}
.child2{
    background-color: blue;
    float: right;
}

正常的浮动效果

正常的效果如上图所示：
我们可以看到父元素本来是设置的属性

background-color: yellow
border: 3px solid black

都没有显示出来，就是因为浮动造成的高度坍塌！

解决浮动的负面影响

解决后的效果图

①、给父元素定义高度

.parent{
    height: 50px;
}

②、给父元素加上overflow：hidden

.parent{
     overflow: hidden;
}

③、给父元素加上overflow：auto

.parent{
     overflow: auto;
}

④、给父元素加上display: table

.parent{
     display: table;
}

⑤、在最后一个子元素上加一个div，使用clear：both

⑥、父元素定义伪类：after

.parent:after{
    content:"";
    display:block;
    clear:both;
}

在实际开发中推荐使用第六种

云服务器 GPU云服务器浮动-前端-css dns域名格式及其解析方法免费域名空间及其使用方法解决方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117173.html

前端面试笔记 - css

摘要：是页面渲染的一部分。一个就是一个整体，所有子元素都会在里面渲染，而不会影响外面的元素。常见为，根元素，，元素，或者设置了的元素列举不同的清除浮动的技巧，并指出它们各自适用的使用场景。是一个把众多小图片打包成一个大图以减少请求。 CSS 中类 (classes) 和 ID 的区别。 id唯一，class可以多个请问 resetting 和 normalizing CSS 之间的区别？你...

loonggg 2019-08-23 14:50 评论0 收藏0
css中和模型及其相关的问题

摘要：是指元素右边界距窗口最左边的距离，是指元素下边界距窗口最上面的距离是什么直译为块级格式化上下文。什么是css和模型又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素IE模型区别是宽度和高度不同，标准模型宽度和高度是content的高度，IE模型的宽度是border 和paddingsh...

megatron 2019-08-29 17:24 评论0 收藏0
css浮动、BFC、定位问题

摘要：元素框从文档流完全删除，并相对于其包含块定位。产生折叠的必备条件必须是邻接的而根据规范，两个是邻接的必须满足以下条件必须是处于常规文档流非和绝对定位的块级盒子并且处于同一个当中。 1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响? 何谓浮动元素？有什么特征？所谓浮动元素，即是设置了浮动属性的元素。其特征为： 1.浮动的框可以向左或者向右移动，直到它的外...

Tony 2019-08-29 12:53 评论0 收藏0
css浮动现象及清除浮动的方法

css浮动现象及清除浮动的方法首先先明确浮动最初的定义及使用场景：实现文本环绕图片的效果。除了用浮动外，目前暂无其他方法实现文本环绕 showImg(https://segmentfault.com/img/remote/1460000016137003?w=838&h=382); 再来看看浮动的具体定义：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不...

Kyxy 2019-08-29 16:29 评论0 收藏0
css浮动现象及清除浮动的方法

css浮动现象及清除浮动的方法首先先明确浮动最初的定义及使用场景：实现文本环绕图片的效果。除了用浮动外，目前暂无其他方法实现文本环绕 showImg(https://segmentfault.com/img/remote/1460000016137003?w=838&h=382); 再来看看浮动的具体定义：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不...

weakish 2019-08-02 11:19 评论0 收藏0