{"id":3117,"date":"2017-08-06T20:11:37","date_gmt":"2017-08-06T17:11:37","guid":{"rendered":"http:\/\/kamil-abzalov.com\/tutorials\/css-floats\/"},"modified":"2020-04-05T22:44:30","modified_gmt":"2020-04-05T19:44:30","slug":"css-floats","status":"publish","type":"post","link":"https:\/\/kamil-abzalov.com\/en\/tutorials\/html-css\/css-floats\/","title":{"rendered":"CSS floats"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; fullwidth=&#8221;on&#8221; _builder_version=&#8221;3.22&#8243;][et_pb_fullwidth_header title=&#8221;CSS floats&#8221; content_max_width=&#8221;none&#8221; _builder_version=&#8221;3.16&#8243; button_one_letter_spacing_hover=&#8221;0&#8243; button_two_letter_spacing_hover=&#8221;0&#8243; button_one_text_size__hover_enabled=&#8221;off&#8221; button_two_text_size__hover_enabled=&#8221;off&#8221; button_one_text_color__hover_enabled=&#8221;off&#8221; button_two_text_color__hover_enabled=&#8221;off&#8221; button_one_border_width__hover_enabled=&#8221;off&#8221; button_two_border_width__hover_enabled=&#8221;off&#8221; button_one_border_color__hover_enabled=&#8221;off&#8221; button_two_border_color__hover_enabled=&#8221;off&#8221; button_one_border_radius__hover_enabled=&#8221;off&#8221; button_two_border_radius__hover_enabled=&#8221;off&#8221; button_one_letter_spacing__hover_enabled=&#8221;on&#8221; button_one_letter_spacing__hover=&#8221;0&#8243; button_two_letter_spacing__hover_enabled=&#8221;on&#8221; button_two_letter_spacing__hover=&#8221;0&#8243; button_one_bg_color__hover_enabled=&#8221;off&#8221; button_two_bg_color__hover_enabled=&#8221;off&#8221;][\/et_pb_fullwidth_header][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;section&#8221; _builder_version=&#8221;3.22&#8243;][et_pb_row admin_label=&#8221;row&#8221; _builder_version=&#8221;3.25&#8243; background_size=&#8221;initial&#8221; background_position=&#8221;top_left&#8221; background_repeat=&#8221;repeat&#8221; custom_padding=&#8221;0px|||&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;3.25&#8243; custom_padding=&#8221;|||&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_dcsbcm_divi_breadcrumbs_module homebreadcrumbtext=&#8221;Home&#8221; hide_currentbreadcrumb=&#8221;off&#8221; _builder_version=&#8221;3.0.92&#8243; custom_padding=&#8221;0px|||&#8221; fontsbreadcrumbs_font_size_tablet=&#8221;51&#8243; fontsbreadcrumbs_line_height_tablet=&#8221;2&#8243; fontsseperator_font_size_tablet=&#8221;51&#8243; fontsseperator_line_height_tablet=&#8221;2&#8243; fontsbreadcrumblinks_font_size_tablet=&#8221;51&#8243; fontsbreadcrumblinks_line_height_tablet=&#8221;2&#8243;][\/et_pb_dcsbcm_divi_breadcrumbs_module][et_pb_text _builder_version=&#8221;3.27.4&#8243; background_size=&#8221;initial&#8221; background_position=&#8221;top_left&#8221; background_repeat=&#8221;repeat&#8221; border_style=&#8221;solid&#8221;]In <a href=\"https:\/\/kamil-abzalov.com\/en\/tutorials\/html-css-tuts\/html-block-layout\/\">last lesson<\/a> we considered html block layout. I remind, div tag has got two main characteristics &#8211; width and height by default.<br \/>\nBu the question is, how to make several divs in row. For this purpose CSS has got a rule &#8211; float. This rule can accept three values &#8211; left, right and none.<br \/>\nThrough float we can set divs in row from left to right. But with float divs sticks to one another. To remove this effect CSS has got clear rule. This rule has got three rules &#8211; left, right and both.<br \/>\nVideo and code lesson are below.<!--more--><br \/>\n[\/et_pb_text][et_pb_video src=&#8221;https:\/\/www.youtube.com\/watch?v=8v2Xh4Q0V8k&#8221; _builder_version=&#8221;3.0.47&#8243;][\/et_pb_video][et_pb_dmb_code_snippet title=&#8221;Code lesson (HTML)&#8221; code=&#8221;PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4KICAgIDxtZXRhIGh0dHAtZXF1aXY9IlgtVUEtQ29tcGF0aWJsZSIgY29udGVudD0iSUU9ZWRnZSI+CiAgICA8dGl0bGU+ZmxvYXQ8L3RpdGxlPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJzdHlsZS5jc3MiPgo8L2hlYWQ+Cjxib2R5PgoKPGRpdiBjbGFzcz0ib25lIj4KICAgIDxwPkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBNYWduaSB1dCBwb3NzaW11cyBxdWFzIG5lbW8gYWxpcXVhbSB0ZW1wb3JhIHJhdGlvbmUgZGViaXRpcywgbGF1ZGFudGl1bSBxdWlzLCBpZCwgbmloaWwgZXggZWFydW0gbGliZXJvIG1pbnVzIGV0IGVvcyBleGNlcHR1cmkgaGljIHJlcHJlaGVuZGVyaXQhPC9wPgo8L2Rpdj4KCjxkaXYgY2xhc3M9InR3byI+CiAgICA8cD5Mb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gTWFnbmkgdXQgcG9zc2ltdXMgcXVhcyBuZW1vIGFsaXF1YW0gdGVtcG9yYSByYXRpb25lIGRlYml0aXMsIGxhdWRhbnRpdW0gcXVpcywgaWQsIG5paGlsIGV4IGVhcnVtIGxpYmVybyBtaW51cyBldCBlb3MgZXhjZXB0dXJpIGhpYyByZXByZWhlbmRlcml0ITwvcD4KPC9kaXY+Cgo8ZGl2IGNsYXNzPSJ0aHJlZSI+CiAgICA8cD5Mb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gTWFnbmkgdXQgcG9zc2ltdXMgcXVhcyBuZW1vIGFsaXF1YW0gdGVtcG9yYSByYXRpb25lIGRlYml0aXMsIGxhdWRhbnRpdW0gcXVpcywgaWQsIG5paGlsIGV4IGVhcnVtIGxpYmVybyBtaW51cyBldCBlb3MgZXhjZXB0dXJpIGhpYyByZXByZWhlbmRlcml0ITwvcD4KPC9kaXY+Cgo8ZGl2IGNsYXNzPSJmb3VyIj4KICAgIDxwPkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBRdWkgYWIgYXNwZXJpb3JlcyBldCBzaW1pbGlxdWUgdG90YW0uIENvbnNlY3RldHVyIG5lY2Vzc2l0YXRpYnVzIHF1YXMsIHRlbmV0dXIgcXVhc2kgaXVzdG8gbmFtIGlkIHF1aWEgYW5pbWkgbmVtbyBpdGFxdWUgZGlnbmlzc2ltb3MgcmF0aW9uZSwgb2JjYWVjYXRpIHJlcHVkaWFuZGFlITwvcD4KPC9kaXY+Cgo8L2JvZHk+CjwvaHRtbD4KCgrQn9GA0LjQvNC10YAgMiAtINC+0LHRgtC10LrQsNC90LjQtSDQutCw0YDRgtC40L3QutC4INGC0LXQutGB0YLQvtC8Cgo8IURPQ1RZUEUgaHRtbD4KPGh0bWw+CjxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0idXRmLTgiPgogICAgPG1ldGEgaHR0cC1lcXVpdj0iWC1VQS1Db21wYXRpYmxlIiBjb250ZW50PSJJRT1lZGdlIj4KICAgIDx0aXRsZT48L3RpdGxlPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJzdHlsZS5jc3MiPgo8L2hlYWQ+Cjxib2R5PgoKPGRpdj4KICAgIDxpbWcgc3JjPSJodHRwczovL3BsYWNla2l0dGVuLmNvbS9nLzI1MC8yMDAiIGFsdD0iIj4KICAgIDxwPkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBEb2xvcnVtIHF1YXMgZXhwbGljYWJvIGNvbnNlcXVhdHVyIGJlYXRhZSBpbiBub3N0cnVtIGlsbHVtIGFkLCB2ZWxpdCBhY2N1c2FtdXMgb2RpdCBmYWNpbGlzIG1hZ25hbSwgc3VzY2lwaXQgZGVsZWN0dXMgZWFydW0gbWFpb3JlcyB2ZWwgb2RpbyBtb2xlc3RpYWUsIHRlbXBvcmUuIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBRdWlzcXVhbSBhY2N1c2FtdXMgdGVtcG9yaWJ1cyBlbGlnZW5kaSwgY29tbW9kaSBzYXBpZW50ZT8gTnVtcXVhbSBub24gcmVwZWxsZW5kdXMgdWxsYW0gc2VkIGRvbG9yaWJ1cyBvcHRpbyBjb3Jwb3JpcyBpcHNhbSBpc3RlIHJlcHJlaGVuZGVyaXQgYXBlcmlhbSBjb25zZWN0ZXR1ciwgcmVpY2llbmRpcyB2ZWxpdCBuZXF1ZS4gTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIEFjY3VzYW11cyByZWljaWVuZGlzLCBtYWlvcmVzIGZ1Z2l0IGV4ZXJjaXRhdGlvbmVtIG5paGlsLCBxdW8gb2RpdCwgdm9sdXB0YXRpYnVzIHF1aWRlbSBuZXNjaXVudCBiZWF0YWUgaW52ZW50b3JlIGNvbnNlcXV1bnR1ciBvZmZpY2lpcyBpdXN0byBpcHNhLCBkb2xvcmUgcHJhZXNlbnRpdW0gZGVzZXJ1bnQgb3B0aW8gYWQuIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBSZWljaWVuZGlzIHJlcGVsbGF0IGRvbG9yZXMgdmVyaXRhdGlzIGFzc3VtZW5kYSBvcHRpbyBpZCBvZGl0IG5lcXVlIGN1cGlkaXRhdGUgdmVsaXQgdW5kZSB0ZW1wb3JlIHF1aWRlbSBtaW51cyBwcm92aWRlbnQsIHNhZXBlIGN1bXF1ZSBzaW1pbGlxdWUgc2l0LiBTYXBpZW50ZSwgZXhjZXB0dXJpLgogICAgICAgIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBEb2xvcnVtIHF1YXMgZXhwbGljYWJvIGNvbnNlcXVhdHVyIGJlYXRhZSBpbiBub3N0cnVtIGlsbHVtIGFkLCB2ZWxpdCBhY2N1c2FtdXMgb2RpdCBmYWNpbGlzIG1hZ25hbSwgc3VzY2lwaXQgZGVsZWN0dXMgZWFydW0gbWFpb3JlcyB2ZWwgb2RpbyBtb2xlc3RpYWUsIHRlbXBvcmUuIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBRdWlzcXVhbSBhY2N1c2FtdXMgdGVtcG9yaWJ1cyBlbGlnZW5kaSwgY29tbW9kaSBzYXBpZW50ZT8gTnVtcXVhbSBub24gcmVwZWxsZW5kdXMgdWxsYW0gc2VkIGRvbG9yaWJ1cyBvcHRpbyBjb3Jwb3JpcyBpcHNhbSBpc3RlIHJlcHJlaGVuZGVyaXQgYXBlcmlhbSBjb25zZWN0ZXR1ciwgcmVpY2llbmRpcyB2ZWxpdCBuZXF1ZS4gTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIEFjY3VzYW11cyByZWljaWVuZGlzLCBtYWlvcmVzIGZ1Z2l0IGV4ZXJjaXRhdGlvbmVtIG5paGlsLCBxdW8gb2RpdCwgdm9sdXB0YXRpYnVzIHF1aWRlbSBuZXNjaXVudCBiZWF0YWUgaW52ZW50b3JlIGNvbnNlcXV1bnR1ciBvZmZpY2lpcyBpdXN0byBpcHNhLCBkb2xvcmUgcHJhZXNlbnRpdW0gZGVzZXJ1bnQgb3B0aW8gYWQuIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBSZWljaWVuZGlzIHJlcGVsbGF0IGRvbG9yZXMgdmVyaXRhdGlzIGFzc3VtZW5kYSBvcHRpbyBpZCBvZGl0IG5lcXVlIGN1cGlkaXRhdGUgdmVsaXQgdW5kZSB0ZW1wb3JlIHF1aWRlbSBtaW51cyBwcm92aWRlbnQsIHNhZXBlIGN1bXF1ZSBzaW1pbGlxdWUgc2l0LiBTYXBpZW50ZSwgZXhjZXB0dXJpLiBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gRG9sb3J1bSBldmVuaWV0IGlwc2EgaXBzYW0sIHF1aWEgZWFxdWUgdml0YWUgZXN0IHZvbHVwdGFzIG5vbiB0ZW1wb3JhPyBEZWJpdGlzIG5vYmlzIGlwc3VtLCBjb25zZXF1dW50dXIgb21uaXMgb2ZmaWNpaXMgZG9sb3JlbXF1ZSBldCBhIGV4LCBlc3NlLjwvcD4KPC9kaXY+Cgo8L2JvZHk+CjwvaHRtbD4=&#8221; admin_label=&#8221;\u041a\u043e\u0434 \u0443\u0440\u043e\u043a\u0430&#8221; style=&#8221;docco&#8221; linenums=&#8221;on&#8221; usetabwidth=&#8221;on&#8221; tabwidth=&#8221;4&#8243; _builder_version=&#8221;3.0.66&#8243;]PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4KICAgIDxtZXRhIGh0dHAtZXF1aXY9IlgtVUEtQ29tcGF0aWJsZSIgY29udGVudD0iSUU9ZWRnZSI+CiAgICA8dGl0bGU+ZmxvYXQ8L3RpdGxlPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJzdHlsZS5jc3MiPgo8L2hlYWQ+Cjxib2R5PgoKPGRpdiBjbGFzcz0ib25lIj4KICAgIDxwPkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBNYWduaSB1dCBwb3NzaW11cyBxdWFzIG5lbW8gYWxpcXVhbSB0ZW1wb3JhIHJhdGlvbmUgZGViaXRpcywgbGF1ZGFudGl1bSBxdWlzLCBpZCwgbmloaWwgZXggZWFydW0gbGliZXJvIG1pbnVzIGV0IGVvcyBleGNlcHR1cmkgaGljIHJlcHJlaGVuZGVyaXQhPC9wPgo8L2Rpdj4KCjxkaXYgY2xhc3M9InR3byI+CiAgICA8cD5Mb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gTWFnbmkgdXQgcG9zc2ltdXMgcXVhcyBuZW1vIGFsaXF1YW0gdGVtcG9yYSByYXRpb25lIGRlYml0aXMsIGxhdWRhbnRpdW0gcXVpcywgaWQsIG5paGlsIGV4IGVhcnVtIGxpYmVybyBtaW51cyBldCBlb3MgZXhjZXB0dXJpIGhpYyByZXByZWhlbmRlcml0ITwvcD4KPC9kaXY+Cgo8ZGl2IGNsYXNzPSJ0aHJlZSI+CiAgICA8cD5Mb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gTWFnbmkgdXQgcG9zc2ltdXMgcXVhcyBuZW1vIGFsaXF1YW0gdGVtcG9yYSByYXRpb25lIGRlYml0aXMsIGxhdWRhbnRpdW0gcXVpcywgaWQsIG5paGlsIGV4IGVhcnVtIGxpYmVybyBtaW51cyBldCBlb3MgZXhjZXB0dXJpIGhpYyByZXByZWhlbmRlcml0ITwvcD4KPC9kaXY+Cgo8ZGl2IGNsYXNzPSJmb3VyIj4KICAgIDxwPkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBRdWkgYWIgYXNwZXJpb3JlcyBldCBzaW1pbGlxdWUgdG90YW0uIENvbnNlY3RldHVyIG5lY2Vzc2l0YXRpYnVzIHF1YXMsIHRlbmV0dXIgcXVhc2kgaXVzdG8gbmFtIGlkIHF1aWEgYW5pbWkgbmVtbyBpdGFxdWUgZGlnbmlzc2ltb3MgcmF0aW9uZSwgb2JjYWVjYXRpIHJlcHVkaWFuZGFlITwvcD4KPC9kaXY+Cgo8L2JvZHk+CjwvaHRtbD4KCgrQn9GA0LjQvNC10YAgMiAtINC+0LHRgtC10LrQsNC90LjQtSDQutCw0YDRgtC40L3QutC4INGC0LXQutGB0YLQvtC8Cgo8IURPQ1RZUEUgaHRtbD4KPGh0bWw+CjxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0idXRmLTgiPgogICAgPG1ldGEgaHR0cC1lcXVpdj0iWC1VQS1Db21wYXRpYmxlIiBjb250ZW50PSJJRT1lZGdlIj4KICAgIDx0aXRsZT48L3RpdGxlPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJzdHlsZS5jc3MiPgo8L2hlYWQ+Cjxib2R5PgoKPGRpdj4KICAgIDxpbWcgc3JjPSJodHRwczovL3BsYWNla2l0dGVuLmNvbS9nLzI1MC8yMDAiIGFsdD0iIj4KICAgIDxwPkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBEb2xvcnVtIHF1YXMgZXhwbGljYWJvIGNvbnNlcXVhdHVyIGJlYXRhZSBpbiBub3N0cnVtIGlsbHVtIGFkLCB2ZWxpdCBhY2N1c2FtdXMgb2RpdCBmYWNpbGlzIG1hZ25hbSwgc3VzY2lwaXQgZGVsZWN0dXMgZWFydW0gbWFpb3JlcyB2ZWwgb2RpbyBtb2xlc3RpYWUsIHRlbXBvcmUuIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBRdWlzcXVhbSBhY2N1c2FtdXMgdGVtcG9yaWJ1cyBlbGlnZW5kaSwgY29tbW9kaSBzYXBpZW50ZT8gTnVtcXVhbSBub24gcmVwZWxsZW5kdXMgdWxsYW0gc2VkIGRvbG9yaWJ1cyBvcHRpbyBjb3Jwb3JpcyBpcHNhbSBpc3RlIHJlcHJlaGVuZGVyaXQgYXBlcmlhbSBjb25zZWN0ZXR1ciwgcmVpY2llbmRpcyB2ZWxpdCBuZXF1ZS4gTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIEFjY3VzYW11cyByZWljaWVuZGlzLCBtYWlvcmVzIGZ1Z2l0IGV4ZXJjaXRhdGlvbmVtIG5paGlsLCBxdW8gb2RpdCwgdm9sdXB0YXRpYnVzIHF1aWRlbSBuZXNjaXVudCBiZWF0YWUgaW52ZW50b3JlIGNvbnNlcXV1bnR1ciBvZmZpY2lpcyBpdXN0byBpcHNhLCBkb2xvcmUgcHJhZXNlbnRpdW0gZGVzZXJ1bnQgb3B0aW8gYWQuIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBSZWljaWVuZGlzIHJlcGVsbGF0IGRvbG9yZXMgdmVyaXRhdGlzIGFzc3VtZW5kYSBvcHRpbyBpZCBvZGl0IG5lcXVlIGN1cGlkaXRhdGUgdmVsaXQgdW5kZSB0ZW1wb3JlIHF1aWRlbSBtaW51cyBwcm92aWRlbnQsIHNhZXBlIGN1bXF1ZSBzaW1pbGlxdWUgc2l0LiBTYXBpZW50ZSwgZXhjZXB0dXJpLgogICAgICAgIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBEb2xvcnVtIHF1YXMgZXhwbGljYWJvIGNvbnNlcXVhdHVyIGJlYXRhZSBpbiBub3N0cnVtIGlsbHVtIGFkLCB2ZWxpdCBhY2N1c2FtdXMgb2RpdCBmYWNpbGlzIG1hZ25hbSwgc3VzY2lwaXQgZGVsZWN0dXMgZWFydW0gbWFpb3JlcyB2ZWwgb2RpbyBtb2xlc3RpYWUsIHRlbXBvcmUuIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBRdWlzcXVhbSBhY2N1c2FtdXMgdGVtcG9yaWJ1cyBlbGlnZW5kaSwgY29tbW9kaSBzYXBpZW50ZT8gTnVtcXVhbSBub24gcmVwZWxsZW5kdXMgdWxsYW0gc2VkIGRvbG9yaWJ1cyBvcHRpbyBjb3Jwb3JpcyBpcHNhbSBpc3RlIHJlcHJlaGVuZGVyaXQgYXBlcmlhbSBjb25zZWN0ZXR1ciwgcmVpY2llbmRpcyB2ZWxpdCBuZXF1ZS4gTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIEFjY3VzYW11cyByZWljaWVuZGlzLCBtYWlvcmVzIGZ1Z2l0IGV4ZXJjaXRhdGlvbmVtIG5paGlsLCBxdW8gb2RpdCwgdm9sdXB0YXRpYnVzIHF1aWRlbSBuZXNjaXVudCBiZWF0YWUgaW52ZW50b3JlIGNvbnNlcXV1bnR1ciBvZmZpY2lpcyBpdXN0byBpcHNhLCBkb2xvcmUgcHJhZXNlbnRpdW0gZGVzZXJ1bnQgb3B0aW8gYWQuIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBSZWljaWVuZGlzIHJlcGVsbGF0IGRvbG9yZXMgdmVyaXRhdGlzIGFzc3VtZW5kYSBvcHRpbyBpZCBvZGl0IG5lcXVlIGN1cGlkaXRhdGUgdmVsaXQgdW5kZSB0ZW1wb3JlIHF1aWRlbSBtaW51cyBwcm92aWRlbnQsIHNhZXBlIGN1bXF1ZSBzaW1pbGlxdWUgc2l0LiBTYXBpZW50ZSwgZXhjZXB0dXJpLiBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gRG9sb3J1bSBldmVuaWV0IGlwc2EgaXBzYW0sIHF1aWEgZWFxdWUgdml0YWUgZXN0IHZvbHVwdGFzIG5vbiB0ZW1wb3JhPyBEZWJpdGlzIG5vYmlzIGlwc3VtLCBjb25zZXF1dW50dXIgb21uaXMgb2ZmaWNpaXMgZG9sb3JlbXF1ZSBldCBhIGV4LCBlc3NlLjwvcD4KPC9kaXY+Cgo8L2JvZHk+CjwvaHRtbD4=[\/et_pb_dmb_code_snippet][et_pb_dmb_code_snippet title=&#8221;Code lesson (CSS)&#8221; code=&#8221;Lm9uZSwgLnR3bywgLnRocmVlIHsKICAgIGZsb2F0OiBsZWZ0OwogICAgY29sb3I6ICNmZmY7CiAgICB3aWR0aDogMzMlOwp9Cgoub25lIHsKICAgIGJhY2tncm91bmQtY29sb3I6IHJlZDsKfQoKLnR3byB7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiBncmVlbjsKfQoKLnRocmVlIHsKICAgIGJhY2tncm91bmQtY29sb3I6IGJsdWU7Cn0KCi5mb3VyIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICNlMWUxZTE7CiAgICBjbGVhcjogYm90aDsKfQoKaW1nIHsKICAgIGZsb2F0OiBsZWZ0OwogICAgbWFyZ2luLXJpZ2h0OiAxMHB4Owp9&#8243; admin_label=&#8221;\u041a\u043e\u0434 \u0443\u0440\u043e\u043a\u0430 &#8221; style=&#8221;docco&#8221; linenums=&#8221;on&#8221; usetabwidth=&#8221;on&#8221; tabwidth=&#8221;4&#8243; _builder_version=&#8221;3.0.66&#8243;]Lm9uZSwgLnR3bywgLnRocmVlIHsKICAgIGZsb2F0OiBsZWZ0OwogICAgY29sb3I6ICNmZmY7CiAgICB3aWR0aDogMzMlOwp9Cgoub25lIHsKICAgIGJhY2tncm91bmQtY29sb3I6IHJlZDsKfQoKLnR3byB7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiBncmVlbjsKfQoKLnRocmVlIHsKICAgIGJhY2tncm91bmQtY29sb3I6IGJsdWU7Cn0KCi5mb3VyIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICNlMWUxZTE7CiAgICBjbGVhcjogYm90aDsKfQoKaW1nIHsKICAgIGZsb2F0OiBsZWZ0OwogICAgbWFyZ2luLXJpZ2h0OiAxMHB4Owp9[\/et_pb_dmb_code_snippet][et_pb_comments _builder_version=&#8221;4.4.2&#8243; custom_margin=&#8221;30px||||false|false&#8221; hover_enabled=&#8221;0&#8243;][\/et_pb_comments][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In last lesson we considered html block layout. I remind, div tag has got two main characteristics &#8211; width and height by default. Bu the question is, how to make several divs in row. For this purpose CSS has got a rule &#8211; float. This rule can accept three values &#8211; left, right and none. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"\u041d\u0430 <a href=\"http:\/\/kamil-abzalov.com\/blochnaja-model-verstki\/\">\u043f\u0440\u043e\u0448\u043b\u043e\u043c \u0443\u0440\u043e\u043a\u0435<\/a>\u00a0\u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u0431\u043b\u043e\u0447\u043d\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c \u0432\u0435\u0440\u0441\u0442\u043a\u0438. \u041d\u0430\u043f\u043e\u043c\u043d\u044e, \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0431\u043b\u043e\u043a \u0438\u043c\u0435\u0435\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a\u0438 - \u0432\u044b\u0441\u043e\u0442\u0443 \u0438 \u0448\u0438\u0440\u0438\u043d\u0443. \u0412\u0430\u0436\u043d\u043e \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0443 <div> \u0448\u0438\u0440\u0438\u043d\u0430 \u0440\u0430\u0432\u043d\u0430 100%.\r\n\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0432\u043e\u043f\u0440\u043e\u0441 - \u043a\u0430\u043a \u0441\u0432\u0435\u0440\u0441\u0442\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0431\u043b\u043e\u043a\u043e\u0432 \u0432 \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u043e\u043a\u0443 - \u0434\u0440\u0443\u0433 \u0437\u0430 \u0434\u0440\u0443\u0433\u043e\u043c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 css \u0435\u0441\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u043e float, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 left, right, none. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u043e\u0431\u0442\u0435\u043a\u0430\u043d\u0438\u044e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c \u0431\u043b\u043e\u043a\u0438 \u043f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443. \u041d\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0435\u0449\u0435 \u043e\u0434\u043d\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 - \u043f\u0440\u0438 \u043e\u0431\u0442\u0435\u043a\u0430\u043d\u0438\u0438 \u0431\u043b\u043e\u043a\u0438, \u043a\u0430\u043a \u0431\u044b, \"\u043d\u0430\u043b\u0438\u043f\u0430\u044e\u0442\" \u0434\u0440\u0443\u0433 \u043d\u0430 \u0434\u0440\u0443\u0433\u0430. \u041a\u0430\u043a \u0436\u0435 \u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u043e\u0442 \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u043f\u0440\u0438\u044f\u0442\u043d\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 css \u0435\u0441\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u043e clear, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c left, right, both.\r\n\u0412\u0438\u0434\u0435\u043e \u0438 \u043a\u043e\u0434 \u0443\u0440\u043e\u043a\u0430 \u043d\u0438\u0436\u0435.<!--more-->\r\n\r\nhttps:\/\/www.youtube.com\/watch?v=8v2Xh4Q0V8k\r\n\r\n<pre><code><!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <meta charset=\"utf-8\">\r\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n    <title>float<\/title>\r\n    <link rel=\"stylesheet\" href=\"style.css\">\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"one\">\r\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni ut possimus quas nemo aliquam tempora ratione debitis, laudantium quis, id, nihil ex earum libero minus et eos excepturi hic reprehenderit!<\/p>\r\n<\/div>\r\n\r\n<div class=\"two\">\r\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni ut possimus quas nemo aliquam tempora ratione debitis, laudantium quis, id, nihil ex earum libero minus et eos excepturi hic reprehenderit!<\/p>\r\n<\/div>\r\n\r\n<div class=\"three\">\r\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni ut possimus quas nemo aliquam tempora ratione debitis, laudantium quis, id, nihil ex earum libero minus et eos excepturi hic reprehenderit!<\/p>\r\n<\/div>\r\n\r\n<div class=\"four\">\r\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ab asperiores et similique totam. Consectetur necessitatibus quas, tenetur quasi iusto nam id quia animi nemo itaque dignissimos ratione, obcaecati repudiandae!<\/p>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n\r\n\r\n\u041f\u0440\u0438\u043c\u0435\u0440 2 - \u043e\u0431\u0442\u0435\u043a\u0430\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0442\u0435\u043a\u0441\u0442\u043e\u043c\r\n\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <meta charset=\"utf-8\">\r\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n    <title><\/title>\r\n    <link rel=\"stylesheet\" href=\"style.css\">\r\n<\/head>\r\n<body>\r\n\r\n<div>\r\n    <img src=\"https:\/\/placekitten.com\/g\/250\/200\" alt=\"\">\r\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum quas explicabo consequatur beatae in nostrum illum ad, velit accusamus odit facilis magnam, suscipit delectus earum maiores vel odio molestiae, tempore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam accusamus temporibus eligendi, commodi sapiente? Numquam non repellendus ullam sed doloribus optio corporis ipsam iste reprehenderit aperiam consectetur, reiciendis velit neque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus reiciendis, maiores fugit exercitationem nihil, quo odit, voluptatibus quidem nesciunt beatae inventore consequuntur officiis iusto ipsa, dolore praesentium deserunt optio ad. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis repellat dolores veritatis assumenda optio id odit neque cupiditate velit unde tempore quidem minus provident, saepe cumque similique sit. Sapiente, excepturi.\r\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum quas explicabo consequatur beatae in nostrum illum ad, velit accusamus odit facilis magnam, suscipit delectus earum maiores vel odio molestiae, tempore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam accusamus temporibus eligendi, commodi sapiente? Numquam non repellendus ullam sed doloribus optio corporis ipsam iste reprehenderit aperiam consectetur, reiciendis velit neque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus reiciendis, maiores fugit exercitationem nihil, quo odit, voluptatibus quidem nesciunt beatae inventore consequuntur officiis iusto ipsa, dolore praesentium deserunt optio ad. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis repellat dolores veritatis assumenda optio id odit neque cupiditate velit unde tempore quidem minus provident, saepe cumque similique sit. Sapiente, excepturi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum eveniet ipsa ipsam, quia eaque vitae est voluptas non tempora? Debitis nobis ipsum, consequuntur omnis officiis doloremque et a ex, esse.<\/p>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/code><\/pre>\r\n\r\n<pre><code>.one, .two, .three {\r\n    float: left;\r\n    color: #fff;\r\n    width: 33%;\r\n}\r\n\r\n.one {\r\n    background-color: red;\r\n}\r\n\r\n.two {\r\n    background-color: green;\r\n}\r\n\r\n.three {\r\n    background-color: blue;\r\n}\r\n\r\n.four {\r\n    background-color: #e1e1e1;\r\n    clear: both;\r\n}\r\n\r\nimg {\r\n    float: left;\r\n    margin-right: 10px;\r\n}\r\n<\/code><\/pre>","_et_gb_content_width":"","footnotes":""},"categories":[257,219],"tags":[259,243],"class_list":["post-3117","post","type-post","status-publish","format-standard","hentry","category-html-css","category-tutorials","tag-css-en","tag-html-en"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS floats - Kamil Abzalov&#039;s blog<\/title>\n<meta name=\"description\" content=\"How to make block float with css, how to remove float in css\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/css-obtekanie-blokov-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS floats - Kamil Abzalov&#039;s blog\" \/>\n<meta property=\"og:description\" content=\"How to make block float with css, how to remove float in css\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/css-obtekanie-blokov-css\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/kamabzalov\" \/>\n<meta property=\"article:published_time\" content=\"2017-08-06T17:11:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-05T19:44:30+00:00\" \/>\n<meta name=\"author\" content=\"Kamil&#039; Abzalov\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"CSS floats\" \/>\n<meta name=\"twitter:description\" content=\"How to make block float with css, how to remove float in css\" \/>\n<meta name=\"twitter:creator\" content=\"@kamabzalov\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kamil&#039; Abzalov\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/css-obtekanie-blokov-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/css-obtekanie-blokov-css\\\/\"},\"author\":{\"name\":\"Kamil' Abzalov\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#\\\/schema\\\/person\\\/9c53360f21b83306ba40c2231573c600\"},\"headline\":\"CSS floats\",\"datePublished\":\"2017-08-06T17:11:37+00:00\",\"dateModified\":\"2020-04-05T19:44:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/css-obtekanie-blokov-css\\\/\"},\"wordCount\":1579,\"commentCount\":0,\"keywords\":[\"css\",\"html\"],\"articleSection\":[\"HTML and CSS\",\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/css-obtekanie-blokov-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/css-obtekanie-blokov-css\\\/\",\"url\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/css-obtekanie-blokov-css\\\/\",\"name\":\"CSS floats - Kamil Abzalov's blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#website\"},\"datePublished\":\"2017-08-06T17:11:37+00:00\",\"dateModified\":\"2020-04-05T19:44:30+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#\\\/schema\\\/person\\\/9c53360f21b83306ba40c2231573c600\"},\"description\":\"How to make block float with css, how to remove float in css\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/css-obtekanie-blokov-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/css-obtekanie-blokov-css\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/css-obtekanie-blokov-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\",\"item\":\"https:\\\/\\\/kamil-abzalov.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS floats\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#website\",\"url\":\"https:\\\/\\\/kamil-abzalov.com\\\/\",\"name\":\"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/kamil-abzalov.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#\\\/schema\\\/person\\\/9c53360f21b83306ba40c2231573c600\",\"name\":\"Kamil' Abzalov\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g\",\"caption\":\"Kamil' Abzalov\"},\"sameAs\":[\"https:\\\/\\\/kamil-abzalov.com\\\/\",\"https:\\\/\\\/www.facebook.com\\\/kamabzalov\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/kamabzalov\",\"https:\\\/\\\/x.com\\\/kamabzalov\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/kamabzalov\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS floats - Kamil Abzalov's blog","description":"How to make block float with css, how to remove float in css","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/css-obtekanie-blokov-css\/","og_locale":"en_US","og_type":"article","og_title":"CSS floats - Kamil Abzalov's blog","og_description":"How to make block float with css, how to remove float in css","og_url":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/css-obtekanie-blokov-css\/","og_site_name":"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430","article_author":"https:\/\/www.facebook.com\/kamabzalov","article_published_time":"2017-08-06T17:11:37+00:00","article_modified_time":"2020-04-05T19:44:30+00:00","author":"Kamil' Abzalov","twitter_card":"summary_large_image","twitter_title":"CSS floats","twitter_description":"How to make block float with css, how to remove float in css","twitter_creator":"@kamabzalov","twitter_misc":{"Written by":"Kamil' Abzalov","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/css-obtekanie-blokov-css\/#article","isPartOf":{"@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/css-obtekanie-blokov-css\/"},"author":{"name":"Kamil' Abzalov","@id":"https:\/\/kamil-abzalov.com\/#\/schema\/person\/9c53360f21b83306ba40c2231573c600"},"headline":"CSS floats","datePublished":"2017-08-06T17:11:37+00:00","dateModified":"2020-04-05T19:44:30+00:00","mainEntityOfPage":{"@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/css-obtekanie-blokov-css\/"},"wordCount":1579,"commentCount":0,"keywords":["css","html"],"articleSection":["HTML and CSS","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kamil-abzalov.com\/videouroki\/html-css\/css-obtekanie-blokov-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/css-obtekanie-blokov-css\/","url":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/css-obtekanie-blokov-css\/","name":"CSS floats - Kamil Abzalov's blog","isPartOf":{"@id":"https:\/\/kamil-abzalov.com\/#website"},"datePublished":"2017-08-06T17:11:37+00:00","dateModified":"2020-04-05T19:44:30+00:00","author":{"@id":"https:\/\/kamil-abzalov.com\/#\/schema\/person\/9c53360f21b83306ba40c2231573c600"},"description":"How to make block float with css, how to remove float in css","breadcrumb":{"@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/css-obtekanie-blokov-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kamil-abzalov.com\/videouroki\/html-css\/css-obtekanie-blokov-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/css-obtekanie-blokov-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430","item":"https:\/\/kamil-abzalov.com\/en\/"},{"@type":"ListItem","position":2,"name":"CSS floats"}]},{"@type":"WebSite","@id":"https:\/\/kamil-abzalov.com\/#website","url":"https:\/\/kamil-abzalov.com\/","name":"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kamil-abzalov.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/kamil-abzalov.com\/#\/schema\/person\/9c53360f21b83306ba40c2231573c600","name":"Kamil' Abzalov","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g","caption":"Kamil' Abzalov"},"sameAs":["https:\/\/kamil-abzalov.com\/","https:\/\/www.facebook.com\/kamabzalov","https:\/\/www.linkedin.com\/in\/kamabzalov","https:\/\/x.com\/kamabzalov","https:\/\/www.youtube.com\/user\/kamabzalov"]}]}},"_links":{"self":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts\/3117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/comments?post=3117"}],"version-history":[{"count":4,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts\/3117\/revisions"}],"predecessor-version":[{"id":31183,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts\/3117\/revisions\/31183"}],"wp:attachment":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/media?parent=3117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/categories?post=3117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/tags?post=3117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}