浮动float
浮动元素对非浮动元素的影响
-
非浮动元素会占用浮动元素原来的空间
-
如果非浮动元素里面有文本,那么文本会被浮动元素给挤出来
实现图文混排,图片浮动,非浮动元素的文本会围绕着图片进行排列
-
注意:子元素浮动,父元素的高度会塌陷(原因是子元素脱离了文档流而父元素没有设置固定高度导致的)
清除浮动影响
-
作用:清除浮动元素对非浮动元素的影响,通过
clear
来清除 -
语法:
clear:left | right | both;
- left:清除左浮动的影响
- right:清除右浮动的影响
- both:同时清除左浮动和右浮动的影响
-
清除浮动的方法:
-
给受影响的元素添加clear:both
语法:
clear : left | right | none;
- left 清除左浮动对元素造成的影响
- right 清除右浮动对元素造成的影响
- both 清除两边浮动对元素造成的影响
-
通过空白div添加clear属性将浮动元素和非浮动元素给分隔开
-
添加一个空的div将浮动区域和标准文档流排列的区域分割
<style> .clear{ clear:both; } </style> <div class="clear"></div>
-
-
通过
<br clear="all">
将浮动元素和非浮动元素分隔开<br clear="all">
-
父元素添加伪元素选择器可以动态添加一个子元素,完成清除浮动的操作(推荐使用)
.clearfix::after{ content:""; display:block; clear:both; }
-
取消浮动的影响:给父元素添加
overflow:hidden;
可以解决子元素浮动父元素高度塌陷的问题将父元素变成一个BFC容器,容器里面的元素如何排列不会影响到容器外面的元素
-
多余文字隐藏,用…代替
例如:jq22.com中间部分内容区域超出部分隐藏设置
文字放在p标签或者span标签内,不允许放在块级元素中
-
只显示单行文本,多余文字隐藏,用…代替
/* 规定文字不换行 */ white-space: nowrap; /* 超出部分隐藏 */ overflow: hidden; /* 多余用...代替 */ text-overflow: ellipsis;
-
显示多行文本, 多余文字使用…代替
/* 老版本设置弹性盒子 */ display: -webkit-box; /* 设置里面内容的排列方式 */ -webkit-box-orient: vertical; /* 设置显示几行文本 */ -webkit-line-clamp: 2; /* 溢出隐藏隐藏 */ overflow: hidden;