浮动

后代选择器

必须要有空格 .box .item(选择的式box类名内所有的item类)

浮动

背景知识:浮动是为了解决文字环绕问题的
块级元素:无视掉浮动元素
行内元素:还是能感受到浮动,所以被挤开了
本质上是怎么回事
浮动使元素层级上升。
文本永远排斥浮动元素。
基本层级:最下面是
文本(inline/inline-block)层级2;
浮动层级:层级1.5;
块级元素:层级1;
浮动的高度塌陷问题!
不是bug。。。。
*解决浮动高度他先问题
overflow:hidden;
表面涵义:超出部分隐藏
深层含义:bfc(block formatting content) 块级格式化上下文(将在上层或下层的抓回同一层)

定宽不定高

多个元素浮动

float:left;从左开始浮动
floa:right;从右开始浮动

浮动的特点

当一个元素加上float:right/left时会有什么特点
1.块状性(元素会强行(强制性)变成块级元素),当变为块级元素后行内样式之间的消失
2.包裹性(让元素尽可能的包裹里面的内容)

清除浮动:

清除的是浮动的排列规律;
给浮动元素添加,清除他的对外浮动特性,可以去下一行。
clear:right/left/both;(这个元素不会挨着前面元素)
在浮动元素最后添加一个clear:both的块级元素,她就能被父级元素检测

你可能感兴趣的:(浮动)