css浮动的含义

最新推荐文章于 2023-10-18 21:02:51 发布

weixin_48802332

最新推荐文章于 2023-10-18 21:02:51 发布

阅读量287

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_48802332/article/details/107147751

版权

为什么要浮动属性
因为浮动可以让元素一个挨着一个。同时可以设置自身尺寸和父元素容器的尺寸大小。一个元素浮动时，其他元素会“环绕”他。
当元素浮动时，一个元素的位置取决于放置在他周围的元素，围绕在他周围的是哪个元素？这个元素会不会换行，这一切取决于围绕在他周围的元素的DOM（文档对象模型，图1）
**dom：**所有元素与他们之间的关系

**什么是浮动元素：**浮动元素同时处于常规流内和流外的元素。其中块级元素认为浮动元素不存在，而浮动元素会影响行内元素的布局，浮动元素会通过影响行内元素间接影响了包含块的布局。

**常规流：**页面上从左往右，从上往下排列的元素流，就是常规流
**脱离常规流：**绝对定位，fixed定位的元素有自己固定的位置，脱离了常规流
**包含块：**一个元素离它最近的块级元素是它的包含块

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<style>
.border {
  width:800px;
  height:500px ;
  border: 0px solid;
}

.common-div {
  width: 160px;
  height: 50px;
  background-color:darkblue;
    float:left;
}

.float-red {
  width: 200px;
  height: 70px;
  background-color: #fcc;
  float: left;
}

.float-blue {
  width: 200px;
  height: 70px;
  background-color:darkgoldenrod;
  float: left;
}
</style>
<body>
    <div class="border">
        <div class="float-red"></div>
        <div class="common-div"></div>
        <div class="float-blue"></div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</body>
</html>

代码效果如下：
在这里插入图片描述

weixin_48802332

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css浮动的含义

为什么要浮动属性因为浮动可以让元素一个挨着一个。同时可以设置自身尺寸和父元素容器的尺寸大小。一个元素浮动时，其他元素会“环绕”他。当元素浮动时，一个元素的位置取决于放置在他周围的元素，围绕在他周围的是哪个元素？这个元素会不会换行，这一切取决于围绕在他周围的元素的DOM（文档对象模型，图1）**dom：**所有元素与他们之间的关系**什么是浮动元素：**浮动元素同时处于常规流内和流外的元素。其中块级元素认为浮动元素不存在，而浮动元素会影响行内元素的布局，浮动元素会通过影响行内元素间接影响了包含块的布局
复制链接

扫一扫