浮动及浮动相关问题(初次)

W_BinaryTree 发布于2019-08-02 10:54 / 2647人阅读

摘要：浮动定义使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者相邻的浮动元素就会停下来，当浮动并不是全动脱离文档流。

这仅是我个人看到的，如果补充，还请大家不要吝啬当个键盘侠，谢谢！

文档流

文档中可显示的元素在排列时候的开始位置以及他们所占的区域。

因为页面中的元素分为不同的种类，所以他们会按各自的特点去显示，在页面中所占的区域不是一样的。会按从上到下，从左到右的顺序输出内容。

浮动 float

定义

使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者相邻的浮动元素就会停下来，当浮动并不是全动脱离文档流。
值            left、right、none
特征
    1、块元素可以在一行显示
    2、按照一个指定的方向移动，遇到父级的边界或者相邻的浮动元素就会停下来
    3、行内元素支持宽高
    4、脱离文档流
    5、块元素默认宽度会改变(包裹性)
    6、父级高度塌陷(破坏性)
          子元素浮动后，父元素高度不会自动撑开。
    7、换行不会被解析成空格
     浮动后的元素就会脱离文档流了，那它就不属于文档流里的结构了，所以换行、空格都跟父级没关系了

特征4、脱离文档实例：

html部分

divdemo1
divdemo02
hello

css部分

div{
    float:left;
    width:100px;
    height:100px;
    background:yellowgreen;
}
span{
    float:right;
    width:100px;
    height:100px;
    border:1px solid #333;
}

特征5、块级元素默认高度会改变

    
    hello world
/*css代码部分*/
    .div{
        height:50px;
        floalt:left;
        border:1px solid #333;
    }

特征6、父元素高度塌陷实例



    do you relaize something?

/*css代码*/
.parent{
    /*float:left;*/
    border:1px solid #333;
}
.children{
    width:100px;
    height:100px;
    float:left;
    border:1px solid #f00;
    background: #ccc
}

7、换行不会被解析成空格


    box
    box
    box

/*css代码*/
.parent{
    border: 1px solid #f00;
}
.box{
    width: 100px;
    height: 200px;
    background: green;
    color: #fff;
    float: left;
}

脱离文档流

脱离文档流指的是元素不在页面中占位置，定位是完全脱离文档流

实例：
html代码


指的是元素不在页面中占位置了，但是文档却还占着位置。。指的是元素不在页面中占位置了，但是文档却还占着位置。。。元素不在页面中占位置了，但指的是元素不在页面中占位置了，但是文档却还占着位置。。。是文档却还占着位置。。。的是元素不在页面中占位置了，但是文档却还占着位置。。。指的是元素不在页面中占位置了，但是文档却还占着位置。。。指的是元素不在页面中占位置了，但是文档却还占着位置。。。指的是元素不在页面中占位置了，但是文档却还占着位置。。。指的是元素不在页面中占位置了，但是文档却还占着位置。。。指的是元素不在页面中占位置了，但是文档却还占着位置。。。

css代码

.div1{
    width: 100px;
    height: 50px;
    background: green;
    color: #fff;
    border: 5px solid blue;
    float: left;
    /*margin: 20px;
    padding: 20px;*/
}
span{
    width:100px;
    height:50px;
}

float与inline-block的区别

对于这一个区别，除了前面脱离文档流和父元素高度塌陷的差异，还有一个区别是：
如果一排元素高度不一至的情况下，想让他们按顺序排列就可以选择inline-block

实例：


    
        1
        2
        3
        4
        5
        6
    
/*css代码*/
    ul{
        width: 300px;
        font-size: 0;
    }
    li{
        list-style: none;
        width: 100px;
        height: 150px;
        background: green;
        font-size: 40px;
        text-align: center;
        line-height: 150px;
        color: #fff;
        /*float: left;*/
        /*float: right;*/
        display: inline-block;
    }

清除浮动的若干方法：

清除浮动的方法

1、clear
2、给父级添加高度
    有的时候是不能给父级添加高度的，所以这个方法就用不了（父级没有高度的情况下）
3、inline-block
    具胡与上一个的清除浮动一样的总是，同时加了以后这个元素就没有办法居中了
4、overflow:hidden;
    如果子级有定位的话，并且这个定位超出了父级的范围，那样的话就看不到了，所以不能加这个命令
5、空标签
    空标签是没有内容，但是它的作用是用来清除浮动的，所以不符合行为、样式、结构相分离的标准
    ie6下标签是有一个最小高度19px，解决后也会有2像素的偏差
6、br清除浮动
    与上面的问题是一样
7、after伪类清除浮动
    after    代表选择到的元素的内容的最后面
            after伪类的内容默认是一个行内元素
    content        设置的内容

代码示例：



    
    
    


/*css代码*/
.parent{
    border: 1px solid #f00;
    /*height: 100px;*/
    /*display: inline-block;
    margin: 0 auto;*/
    /*overflow: hidden;*/
}
.clearfix:after{
    content:" ";
    display:block;
    clear:both;
}
.box{
    width: 100px;
    height: 100px;
    background: green;
    float: left;
}

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

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

浮动及浮动相关问题(初次)

摘要：浮动定义使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者相邻的浮动元素就会停下来，当浮动并不是全动脱离文档流。这仅是我个人看到的，如果补充，还请大家不要吝啬当个键盘侠，谢谢！文档流文档中可显示的元素在排列时候的开始位置以及他们所占的区域。因为页面中的元素分为不同的种类，所以他们会按各自的特点去显示，在页面中所占的区域不是一样的。会按从上到下，从左到右的顺序输出内容。...

fsmStudy 2019-08-30 15:54 评论0 收藏0
CSS入门指南-4：页面布局

摘要：属性是中最重要的用于控制布局的属性。布局的高度多数情况下，布局中结构化元素乃至任何元素的高度是不必设定的。更新效果如图以上措施使布局有了明显改观。这是《CSS设计指南》的读书笔记，用于加深学习效果。 display 属性 display是 CSS 中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值。对于大多数元素它们的默认值通常是 block 或 inline ...

ethernet 2019-08-02 15:57 评论0 收藏0
CSS入门指南-4：页面布局

摘要：属性是中最重要的用于控制布局的属性。布局的高度多数情况下，布局中结构化元素乃至任何元素的高度是不必设定的。更新效果如图以上措施使布局有了明显改观。这是《CSS设计指南》的读书笔记，用于加深学习效果。 display 属性 display是 CSS 中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值。对于大多数元素它们的默认值通常是 block 或 inline ...

Stardustsky 2019-08-29 13:08 评论0 收藏0
优化关键渲染路径

摘要：三种渲染流程实际场景下，大概会有三种常见的渲染流程注意和步骤是可避免的优化浏览器会在和加载完开始渲染页面。优化避免阻塞解析器通过以上两种方式引入均会阻塞，因而会阻塞出现在脚本后面的标记的渲染。浏览器渲染原理 showImg(https://segmentfault.com/img/remote/1460000009159494?w=538&h=507);showImg(https:/...

Integ 2019-08-20 17:43 评论0 收藏0
CSS知识点及技巧整理

摘要：当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。详见浮动与清除浮动浮动相关知识属性的取值元素向左浮动。是相对长度单位，相对于当前对象内文本的字体尺寸。这些个知识点是我个人认为的，下面我们就来看看这些个知识点。 1.怎么让一个不定宽高的 DIV，垂直水平居中? 使用Flex 只需要在父盒子设置：display: flex; justify-content: cent...

masturbator 2019-08-30 14:02 评论0 收藏0