前端面试 【CSS】 |
您所在的位置：网站首页 › 清理积压库存的好处有哪些方面呢 › 前端面试 【CSS】 |
|
浮动布局简介：当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变现的好像浮动元素不存在一样。 1. 浮动布局的优点浮动布局优点就是在图文混排的时候可以很好的使文字环绕在图片周围。另外当元素浮动了起来之后，它有着块级元素的一些性质，例如可以设置宽高等。但它与inline-block还是有一些区别的，第一个就是横向排序的时候，float可以设置方向而inline-block方向是固定的；第二就是inline-block在使用时有时会有空白间隙的问题。 2. 浮动布局的缺点最明显的缺点就是浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素高度塌陷。 3. 清除浮动的方法1. 添加额外的子标签配合 clear:both 清除浮动 代码语言：javascript复制 .child{ width:100px; height:100px; background:red; float: left; }2. 父级添加 overflow 属性，或者设置高度 代码语言：javascript复制 .parent{ overflow: hidden; /* 或者设置高度 */ /* height:100px; */ } .child{ width:100px; height:100px; background:red; float: left; }3. 添加伪类清除浮动（推荐 ） 代码语言：javascript复制 .parent:after{ /* 设置添加子元素的内容是空 */ content: ''; /* 设置添加子元素为块级元素 */ display: block; /* 设置添加的子元素的高度0 */ height: 0; /* 设置添加子元素看不见 */ visibility: hidden; /* 设置clear：both */ clear: both; } .child{ width:100px; height:100px; background:red; float: left; } |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |