2021-09-17

CSS浮动属性

float
当某元素通过该属性设置浮动后，不论该元素是行内元素还是块级元素，都会被当作块级元素处理，即display属性被设置为block。属性值为left或right，表示向左或者向右浮动，默认值为none不浮动
clear
属性值可以是none（默认值）、left (左侧不允许出现浮动元素）right（右侧不允许出现浮动元素）和both（两侧都不允许出现浮动元素）
clip
该元素必须是绝对定位的，方法是设置position为absolute，默认值为auto，表示不进行任何裁剪。如果要进行裁剪，需要给定一个矩形，格式为rect（top right bottom left），top、right、bottom、left可以理解为裁剪后的矩形的右上角纵坐标（top）和横坐标（right）、左下角的纵坐标（bottom）和横坐标（left）
overflow

1. visible:默认值，显示为元素既不裁剪内容，也不添加滚动条，超出的内容会显示在元素外。
2. auto:如果内容被修剪，自动添加滚动条。
3. hidden:会自动将超出的内容裁剪掉，且裁剪掉的内容不可见。
4. scroll:设置一直显示滚动条。
   display
5. none:该元素不会被显示，通常用于预先做好，动态显示。
6. block:该元素将显示为块级元素，元素前后会有换行符，可以设置它的宽高和上右下左的内外边距。
7. inline:该元素会被显示为内联元素，元素前后没有换行符，也无法设置宽高和内外边距。
8. inline-block:该元素会被认为是行内块元素，这种元素既具有block元素，可以设置width和height属性的特性，又保持了inline元素不换行的特性。
9. inherit:继承父元素的display设置。
   visibility
   visibility与display:none是不一样的，visibility设置为隐藏以后，元素占用的空间依然会保留，但display:none不保留占用空间，而是从页面中离开。常用属性:visible（显示，默认值）和hidden（隐藏）。